Properti object-fit
Properti object-fit mengatur
rasio aspek atau penskalaan
elemen seperti gambar
atau video.
Sintaks
selektor {
object-fit: fill atau contain atau cover atau none;
}
Tabel berikut menampilkan nilai-nilai utama untuk
properti object-fit:
Nilai
| Nilai | Deskripsi |
|---|---|
fill |
Menskalakan elemen agar sesuai dengan ukuran yang ditentukan, namun rasio aspek elemen diabaikan. |
contain |
Menskalakan elemen agar sesuai dengan ukuran yang ditentukan, dengan mempertahankan rasio aspek elemen. |
cover |
Ukuran elemen diubah untuk memenuhi sepenuhnya area yang ditentukan, sambil mempertahankan rasio aspek elemen itu sendiri. |
none |
Ukuran asli elemen dipertahankan. |
Contoh
Mari kita atur gambar kita untuk mengisi ukuran yang ditentukan tanpa mempertahankan rasio aspek:
<div>
<img src="bg.png">
</div>
img {
object-fit: fill;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Contoh
Sekarang mari kita buat gambar memenuhi wadah yang ditentukan dengan mempertahankan rasio aspek:
<div>
<img src="bg.png">
</div>
img {
object-fit: contain;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Contoh
Mari kita isi wadah yang ditentukan dengan gambar kita sehingga ukuran gambar itu sendiri berubah, tetapi rasio aspeknya dipertahankan:
<div>
<img src="bg.png">
</div>
img {
object-fit: cover;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Contoh
Mari kita tempatkan gambar kita ke dalam wadah yang ditentukan dengan mempertahankan ukuran aslinya:
<div>
<img src="bg.png">
</div>
img {
object-fit: none;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Lihat juga
-
properti
aspect-ratio,
yang menentukan rasio aspek elemen