Menyelam Jauh Ke dalam kesesuaian objek dan ukuran latar belakang di CSS

Kami tidak selalu dapat memuat gambar dengan ukuran berbeda untuk elemen HTML. Jika kita menggunakan lebar dan tinggi yang tidak proporsional dengan rasio aspek gambar, gambar mungkin dikompresi atau diregangkan. Itu tidak baik, dan itu dapat diselesaikan baik dengan object-fit untuk elemen img atau dengan menggunakan background-size .

Pertama, mari kita definisikan masalahnya. Perhatikan gambar berikut:

Mengapa ini terjadi?

Gambar akan memiliki rasio aspek, dan browser akan mengisi kotak yang berisi gambar tersebut. Jika rasio aspek gambar berbeda dari lebar dan tinggi yang ditentukan untuknya, maka hasilnya akan berupa gambar yang diperas atau diregangkan.

Kita lihat ini pada gambar berikut:

Solusinya

Kami tidak selalu perlu menambahkan gambar dengan ukuran berbeda ketika rasio aspek gambar tidak sejajar dengan lebar dan tinggi elemen yang memuatnya. Sebelum masuk ke solusi CSS, saya ingin menunjukkan kepada Anda bagaimana kami biasa melakukan ini di aplikasi pengeditan foto:

Sekarang setelah kita memahami cara kerjanya, mari masuk ke cara kerjanya di browser. ( Peringatan spoiler: Lebih mudah! )

Kesesuaian object-fit CSS

Properti object-fit mendefinisikan bagaimana konten dari elemen yang diganti seperti img atau video harus diubah ukurannya agar sesuai dengan wadahnya. Nilai default untuk object-fit adalah fill , yang dapat mengakibatkan gambar terjepit atau diregangkan.

Mari kita membahas nilai-nilai yang mungkin.

Kemungkinan Nilai untuk object-fit

object-fit: contain

Dalam hal ini, gambar akan diubah ukurannya agar sesuai dengan rasio aspek wadahnya. Jika rasio aspek gambar tidak cocok dengan wadah, itu akan menjadi kotak surat.

object-fit: cover

Di sini, gambar juga akan diubah ukurannya agar sesuai dengan rasio aspek wadahnya, dan jika rasio aspek gambar tidak cocok dengan wadahnya, maka akan dipotong agar sesuai.

object-fit: fill

Dengan ini, gambar akan diubah ukurannya agar sesuai dengan rasio aspek wadahnya, dan jika rasio aspek gambar tidak cocok dengan wadahnya, gambar akan diperas atau diregangkan. Kami tidak menginginkan itu.

object-fit: none

Dalam hal ini, gambar tidak akan diubah ukurannya sama sekali, tidak diregangkan atau diperas. Ini berfungsi seperti nilai cover , tetapi tidak menghormati rasio aspek wadahnya.

Selain object-fit , kami juga memiliki properti object-position , yang bertanggung jawab untuk memposisikan gambar di dalam wadahnya.

Kemungkinan Nilai Untuk object-position

Properti object-position bekerja mirip dengan properti background-position CSS:

Kata kunci top dan bottom juga berfungsi ketika rasio aspek kotak yang berisi lebih besar secara vertikal:

background-size CSS

Dengan background-size , perbedaan pertama adalah bahwa kita berurusan dengan latar belakang, bukan elemen HTML ( img ).

Kemungkinan Nilai untuk background-size

Nilai yang mungkin untuk background-size adalah auto , contain , dan cover .

background-size: auto

Dengan auto , gambar akan tetap pada ukuran defaultnya:

background-size: cover

Di sini, gambar akan diubah ukurannya agar sesuai dengan wadah. Jika rasio aspek tidak sama, maka gambar akan disamarkan agar pas.

background-size: contain

Dalam hal ini, gambar akan diubah ukurannya agar sesuai dengan wadah. Jika rasio aspek tidak aktif, maka gambar akan menjadi kotak surat seperti yang ditunjukkan pada contoh berikut:

Adapun background-position , ini mirip dengan cara kerja object-position . Satu-satunya perbedaan adalah bahwa posisi default object-position berbeda dari background-position .

Kapan Tidak Menggunakan object-fit atau background-size

Jika elemen atau gambar diberi ketinggian tetap dan memiliki background-size: cover atau object-fit: cover diterapkan padanya, akan ada titik di mana gambar akan terlalu lebar, sehingga kehilangan detail penting yang mungkin memengaruhi cara pengguna melihat gambar.

Perhatikan contoh berikut di mana gambar diberi ketinggian tetap:

 .card__thumb { height: 220px; }

Jika wadah kartu terlalu lebar, maka akan menghasilkan apa yang kita lihat di sebelah kanan (gambar yang terlalu lebar). Itu karena kami tidak menentukan rasio aspek.

Hanya ada satu dari dua perbaikan untuk ini. Yang pertama adalah menggunakan padding hack untuk membuat rasio intrinsik.

 .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

Perbaikan kedua adalah menggunakan properti CSS aspect-ratio baru. Dengan menggunakannya, kita dapat melakukan hal berikut:

 .card__thumb img { aspect-ratio: 4 / 3; }

Catatan : Saya sudah menulis tentang properti aspect-ratio secara rinci jika Anda ingin mempelajarinya: "Mari Belajar Tentang Rasio Aspek Dalam CSS".

Gunakan Kasus Dan Contoh

Avatar Pengguna

Kasus penggunaan yang sempurna untuk object-fit: cover adalah avatar pengguna. Rasio aspek yang diizinkan untuk avatar sering kali berbentuk persegi. Menempatkan gambar dalam wadah persegi dapat mendistorsi gambar.

 .c-avatar { object-fit: cover; }

Daftar Logo

Daftar klien bisnis itu penting. Kami akan sering menggunakan logo untuk tujuan ini. Karena logo akan memiliki ukuran yang berbeda, kami membutuhkan cara untuk mengubah ukurannya tanpa mendistorsinya.

Untungnya, object-fit: contain adalah solusi yang baik untuk itu.

 .logo__img { width: 150px; height: 80px; object-fit: contain; }

Gambar Mini artikel

Ini adalah kasus penggunaan yang sangat umum. Penampung untuk gambar mini artikel mungkin tidak selalu memiliki gambar dengan rasio tinggi lebar yang sama. Masalah ini harus diperbaiki oleh sistem manajemen konten (CMS) sejak awal, tetapi tidak selalu.

 .article__thumb { object-fit: cover; }

Latar Belakang Pahlawan

Dalam kasus penggunaan ini, keputusan apakah akan menggunakan elemen img atau latar belakang CSS akan bergantung pada hal berikut:

• Apakah gambar itu penting? Jika CSS dinonaktifkan karena alasan tertentu, apakah kita ingin pengguna melihat gambarnya?
• Atau apakah tujuan gambar itu hanya dekoratif?

Berdasarkan jawaban kami, kami dapat memutuskan fitur mana yang akan digunakan. Jika gambar itu penting :

 <section class="hero"> <img class="hero__thumb" src="thumb.jpg" alt="" /> </section>

 .hero { position: relative; } .hero__thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

Jika gambarnya dekoratif , kita bisa menggunakan background-image :

 .hero { position: relative; background-image: linear-gradient(to top, #a34242, rgba(0,0,0,0), url("thumb.jpg"); background-repeat: no-repeat; background-size: cover; }

CSS lebih pendek dalam hal ini. Pastikan bahwa teks apa pun yang ditempatkan di atas gambar dapat dibaca dan diakses.

Menambahkan Latar Belakang ke Gambar Dengan object-fit: contain

Tahukah Anda bahwa Anda dapat menambahkan warna latar belakang ke img ? Kami akan mendapat manfaat dari itu ketika juga menggunakan object-fit: contain .

Dalam contoh di bawah ini, kami memiliki kisi-kisi gambar. Jika rasio aspek gambar dan wadah berbeda, warna latar belakang akan muncul.

 img { object-fit: contain; background-color: #def4fd; }

Elemen Video

Pernahkah Anda membutuhkan video sebagai latar belakang? Jika demikian, maka Anda mungkin ingin mengambil lebar dan tinggi penuh dari induknya.

 .hero { position: relative; background-color: #def4fd; } .hero__video { position: aboslute; left: 0; top: 0; width: 100%; height: 100%; }

Untuk membuatnya sepenuhnya menutupi lebar dan tinggi induknya, kita perlu mengganti nilai default object-fit :

 .hero__video { /* other styles */ object-fit: cover; }

Kesimpulan

Seperti yang telah kita lihat, ukuran object-fit dan background-size sangat berguna untuk menangani rasio aspek gambar yang berbeda. Kami tidak akan selalu memiliki kendali atas pengaturan dimensi yang sempurna untuk setiap gambar, dan di situlah kedua fitur CSS ini bersinar.

Pengingat ramah tentang implikasi aksesibilitas dari memilih antara elemen img dan latar belakang CSS: Jika gambarnya murni dekoratif, pilih latar belakang CSS. Jika tidak, img lebih cocok.

Saya harap Anda menemukan artikel ini bermanfaat. Terima kasih telah membaca.