Teknik CSS hemat waktu untuk membuat gambar responsif

Sebagai pengembang web, ada kemungkinan besar Anda telah bertemu dengan dua musuh artikel ini: gambar dan tenggat waktu . Terkadang, karena beberapa alasan, gambar Anda tidak sesuai dengan tata letak dan Anda tidak ingin memikirkan hal ini selama berjam-jam.

Situasi ini telah terjadi pada saya berkali-kali dan saya telah belajar dari kesalahan saya. Tidak ada lagi peretasan sihir hitam - berikut adalah lima teknik favorit saya untuk menangani pengubahan ukuran gambar.

dengan cara “OMG I NEED THIS ASAP”

Ini 17:00 pada hari Jumat, Anda harus menyelesaikan halaman ini, tetapi gambar tidak sesuai dengan tata letaknya. Saatnya menggunakan trik sulap Anda!

.myImg { background-image: url("my-image.png"); background-size: cover; }

Kedengarannya familiar? Kita semua pernah melakukannya, bukankah ini terasa seperti menipu Anda?

Menggunakan backgroundproperti sangat berguna, mereka hanya berfungsi. Namun, ingat bahwa Anda harus menggunakannya hanya untuk gambar non-konten atau sebagai pengganti teks dan dalam beberapa kasus tertentu.

Jalan dari masa depan

Bagaimana jika aku memberitahumu sihir semacam ini ada juga untuk elemen? Ucapkan "hai" pada properti object-fit - yang juga berfungsi untuk video!

.myImg { object-fit: cover; width: 320px; height: 180px; }

Itu semua orang! Lihat bagaimana saat kita mendapatkan nilai bersahabat cover, kita juga bisa menggunakan contain.

Oke apa jebakannya?

Sayangnya object-fittidak akan berfungsi di IE dan Safari versi lama, tetapi ada polyfill.

Cara "Netflix"

Anda mungkin berpikir "pria penipu yang bagus, satu cara lagi yang tidak berfungsi di browser lama seperti IE?". Jangan khawatir, yang ini berfungsi di mana saja dan ini adalah favorit saya! Anda harus membungkus gambar Anda dengan orang tua yang relatif empuk.

Kami akan menjaga rasio gambar dengan persentase pada paddingproperti. Gambar Anda akan menjadi anak absolut ukuran penuh.

Kodenya terlihat seperti ini:

.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

"Hei bung, ini terlihat rumit."

Begitu Anda mendapatkan konsepnya, tekniknya sederhana dan banyak digunakan. Netflix menggunakannya!

Demo kecil:

Cara Sederhana

Anda mungkin sudah tahu yang ini:

img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }

Jika tata letak Anda tidak terlalu rumit, ini berfungsi dalam banyak kasus.

Cara Performa (Lanjutan)

Yang saya maksud dengan kinerja adalah waktu muat. Gambar pahlawan besar dapat merusaknya dan membuat halaman Anda terasa lambat, terutama di perangkat seluler.

Tahukah Anda bahwa di browser modern, Anda dapat mengubah sumber gambar bergantung pada lebar halaman Anda? Untuk itulah srcsetdibuat!

Anda dapat menggabungkannya dengan tag HTML 5 , yang terdegradasi dengan anggun dengan .

Untuk Rekap

  1. Gunakan background-image jika gambar Anda bukan bagian dari konten halaman.
  2. Gunakan object-fitjika Anda tidak peduli tentang IE.
  3. Teknik wadah berlapis, yang digunakan oleh Netflix, berfungsi di mana saja.
  4. Dalam kebanyakan kasus, cukup tambahkan height: auto;CSS Anda.
  5. Jika Anda membutuhkan waktu muat yang cepat, gunakan srcsetuntuk memuat gambar yang lebih kecil di perangkat seluler.