Sesuai dengan objek - Trik CSS

The object-fitharta mentakrifkan bagaimana elemen respon kepada ketinggian dan lebar kotak kandungannya. Ini bertujuan untuk gambar, video dan format media lain yang dapat disematkan bersama dengan object-positionharta tanah. Digunakan dengan sendirinya, object-fitmemungkinkan kita memangkas gambar sebaris dengan memberi kita kawalan yang terperinci mengenai bagaimana ia memerah dan meregangkan di dalam kotaknya.

object-fit boleh ditetapkan dengan salah satu daripada lima nilai berikut:

fill: ini adalah nilai lalai yang meregangkan gambar agar sesuai dengan kotak kandungan, tanpa mengira aspek-nisbahnya.
contain: meningkatkan atau menurunkan ukuran gambar untuk mengisi kotak sambil mengekalkan aspek-nisbahnya.
cover: gambar akan mengisi tinggi dan lebar kotaknya, sekali lagi mengekalkan nisbah aspeknya tetapi sering memotong gambar dalam prosesnya.
none: gambar akan mengabaikan tinggi dan lebar induk dan mengekalkan ukuran asalnya.
scale-down: gambar akan membandingkan perbezaan antara nonedan containuntuk mencari ukuran objek konkrit terkecil.

Inilah cara kami menetapkan harta itu:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Kerana gambar kedua mempunyai nisbah aspek yang berbeza dengan gambar asli di sebelah kiri, ia akan meregangkan di luar bidang kandungannya, memotong bahagian atas dan bawah gambar.

Perlu diperhatikan bahawa secara lalai gambar berpusat di dalam kotak kandungannya tetapi ini boleh diubah dengan object-positionharta tanah.

Demo

Demo di bawah menunjukkan lima contoh yang memperincikan bagaimana kita mungkin mahu gambar melengkung ke dalam kotak kandungan yang kadang-kadang lebih kecil atau lebih besar daripada lebar asalnya (ubah saiz penyemak imbas untuk idea yang lebih baik bagaimana ini berfungsi):

Lihat kesesuaian pen oleh Robin Rendle (@robinrendle) di CodePen.

Sekiranya kandungan gambar tidak mengisi kotak kandungan dengan alasan apa pun, maka ruang yang tidak diisi akan menunjukkan latar belakang elemen, dalam hal ini latar belakang kelabu muda.

Sokongan penyemak imbas

Perlu diperhatikan bahawa iOS 8-9.3 dan Safari 7-9.1 adalah object-fitmiliknya tetapi tidak object-position.

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.