Jika Anda terlibat dalam pengembangan web, kemungkinan besar Anda akrab dengan dua monster, yang akan dibahas dalam artikel, terjemahan yang kami terbitkan hari ini. Kita berbicara tentang gambar dan tenggat waktu. Terkadang, karena alasan tertentu, gambar tidak ingin pas dengan tempat tata letak halaman yang dirancang untuk mereka, dan Anda tidak dapat menghabiskan beberapa jam untuk mengetahuinya.
Penulis materi ini mengatakan bahwa ia sering menghadapi masalah yang sama, dan tabrakan ini mengajarkan sesuatu kepadanya. Di sini dia ingin berbicara tentang lima pendekatan untuk mengelola ukuran gambar yang paling dia sukai.
Pendekatan No. 1: gambar latar belakang
Jumat Jam lima sore. Anda harus segera menyelesaikan halaman tertentu. Semuanya sudah siap, satu-satunya masalah adalah gambar, yang tidak sesuai di mana mereka seharusnya. Jika ini terjadi pada Anda - ini adalah salah satu alat ajaib yang akan membantu Anda:
.myImg { background-image: url("my-image.png"); background-size: cover; }
Terlihat familier? Kita semua pernah melakukan ini. Apakah ini menunjukkan penipuan kepada Anda?
Menggunakan properti
background sangat berguna, mereka hanya melakukan apa yang diharapkan dari mereka. Namun, perlu diingat bahwa mereka harus digunakan hanya untuk gambar-gambar yang bukan bagian dari konten utama halaman, untuk gambar yang menggantikan teks, dan dalam beberapa
kasus khusus .
Pendekatan # 2: objek-fit
Bagaimana jika saya mengatakan bahwa properti
object-fit berlaku untuk elemen
<img> ? Omong-omong, ini juga berfungsi dengan video.
.myImg { object-fit: cover; width: 320px; height: 180px; }
Itu saja. Perhatikan bahwa properti
object-fit dapat diatur
contain .
Dukungan supportObject-fit
Sayangnya,
object-fit tidak akan berfungsi di IE dan di versi Safari yang lebih lama, namun, untuk kasus seperti itu ada
polyfill .
Berikut adalah informasi dukungan yang diambil
dari sini .
Dukungan untuk browser desktop yang sesuai objek→
Ini adalah contoh menggunakan objek-fit
Pendekatan # 3: Penggunaan Netflix
Apa yang baru saja kita bicarakan mungkin tampak menarik, tetapi di browser yang ketinggalan zaman, tanpa polyfill, ini tidak akan berfungsi. Jika Anda membutuhkan sesuatu yang universal, mungkin apa yang akan kita bicarakan sekarang tepat untuk Anda. Metode ini, salah satu favorit saya, bekerja di mana saja.
Terdiri dari fakta bahwa gambar harus ditempatkan di elemen induk, properti
position yang diatur ke
relative , dan properti
padding diatur dalam persentase. Akibatnya, gambar akan menempati seluruh area bebas dari elemen induk. Ini terlihat seperti ini:
.wrapper { position: relative; padding-top: 56.25%; } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
Di sini Anda mungkin berpikir bahwa itu terlalu rumit. Namun, setelah Anda memahami arti teknik ini, Anda menyadari bahwa itu sangat sederhana dan nyaman. Selain itu, teknik ini
banyak digunakan , misalnya di Netflix.
Lihatlah nama-nama kelas→
Berikut adalah contoh penerapan teknik ini
Pendekatan No. 4: tinggi badan
Di sini, untuk mengontrol ukuran gambar, gunakan
height: auto properti
height: auto , dan, di samping itu, properti
max-width . Mungkin Anda sudah tahu teknik ini:
img { height: auto; width: 100%; max-width: 720px; }
Pendekatan ini berlaku dalam banyak kasus, ketika tata letak Anda tidak terlalu rumit.
→
Ini sebuah contohPendekatan # 5: Manajemen Gambar dan Kinerja
Yang dimaksud dengan "kinerja" adalah waktu pemuatan halaman. Gambar besar dapat memakan waktu sangat lama untuk dimuat, yang memberi pengguna kesan bahwa halaman Anda lambat, terutama jika halaman ini dilihat pada perangkat seluler.
Apakah Anda tahu bahwa di
browser modern Anda dapat mengubah sumber gambar tergantung pada lebar halaman? Itulah sebabnya atribut
srcset .
Atribut serupa dapat digunakan dalam tag HTML 5
. , , <img> . , , <img> :
<picture> <source media="(max-width: 799px)" srcset="elva-480w.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img align="center" src="elva-800w.jpg"> </picture>
→ Ini sebuah contohRingkasan
Untuk meringkas:
- Jika gambar Anda bukan bagian dari konten halaman, gunakan
background-image . - Jika dukungan IE tidak menarik bagi Anda, gunakan
object-fit . - Teknologi wadah berbasis Netflix dengan
padding khusus berfungsi di mana-mana. - Dalam kebanyakan kasus, untuk menyelesaikan masalah dengan gambar, cukup menggunakan
height: auto properti height: auto di CSS; - Jika Anda ingin mengurangi waktu pemuatan halaman, gunakan atribut
srcset untuk mengunduh gambar yang lebih kecil di perangkat seluler.
Kami berharap bahwa pendekatan untuk bekerja dengan gambar yang dibahas di sini akan bermanfaat bagi Anda.
