Objek-fit - Trik CSS | CSS Almanak 2024

The object-fitmendefinisikan properti bagaimana elemen merespon dengan tinggi dan lebar kotak isinya. Ini ditujukan untuk gambar, video, dan format media yang dapat disematkan lainnya sehubungan dengan object-positionproperti. Digunakan dengan sendirinya, object-fitmemungkinkan kita memangkas gambar sebaris dengan memberi kita kendali yang sangat baik atas bagaimana gambar itu meremas dan meregang di dalam kotaknya.

object-fit dapat disetel dengan salah satu dari lima nilai berikut:

fill: ini adalah nilai default yang membentangkan gambar agar pas dengan kotak konten, terlepas dari rasio aspeknya.
contain: memperbesar atau memperkecil ukuran gambar untuk mengisi kotak sambil mempertahankan rasio aspeknya.
cover: gambar akan memenuhi tinggi dan lebar kotaknya, sekali lagi mempertahankan rasio aspeknya tetapi sering memotong gambar dalam prosesnya.
none: gambar akan mengabaikan tinggi dan lebar induk dan mempertahankan ukuran aslinya.
scale-down: gambar akan membandingkan perbedaan antara nonedan containuntuk mencari ukuran benda beton terkecil.

Beginilah cara kami menyetel properti itu:

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

Karena gambar kedua memiliki rasio aspek yang berbeda dari gambar asli di sebelah kiri, gambar tersebut akan meregang di luar bidang kotak kontennya, memotong bagian atas dan bawah gambar.

Perlu dicatat bahwa secara default gambar dipusatkan di dalam kotak kontennya tetapi ini dapat diubah dengan object-positionproperti.

Demo

Demo di bawah ini menunjukkan lima contoh yang merinci bagaimana kita mungkin ingin gambar dimasukkan ke dalam kotak konten yang terkadang lebih kecil atau lebih besar dari lebar aslinya (ubah ukuran browser untuk mendapatkan gambaran yang lebih baik tentang cara kerjanya):

Lihat Pen object-fit oleh Robin Rendle (@robinrendle) di CodePen.

Jika konten gambar tidak mengisi kotak konten karena alasan apa pun, maka ruang yang tidak terisi akan menampilkan latar belakang elemen, dalam hal ini latar belakang abu-abu terang.

Dukungan browser

Perlu dicatat bahwa iOS 8-9.3 dan Safari 7-9.1 adalah object-fitproperti tetapi tidak object-position.

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.