CSS Properti objek-fit
Properti CSS object-fitdigunakan untuk menentukan bagaimana <img> atau <video> harus diubah ukurannya agar sesuai dengan wadahnya.
Properti kesesuaian objek CSS
Properti CSS object-fitdigunakan untuk menentukan bagaimana <img> atau <video> harus diubah ukurannya agar sesuai dengan wadahnya.
Properti ini memberi tahu konten untuk mengisi wadah dengan berbagai cara; seperti "pertahankan rasio aspek itu" atau "regangkan dan gunakan ruang sebanyak mungkin".
Lihatlah gambar berikut dari Paris. Gambar ini memiliki lebar 400 piksel dan tinggi 300 piksel:
Namun, jika kita menata gambar di atas menjadi setengah lebarnya (200 piksel) dan tinggi yang sama (300 piksel), akan terlihat seperti ini:
Contoh
img {
width: 200px;
height:
300px;
}
Kami melihat bahwa gambar sedang diperkecil agar sesuai dengan wadah berukuran 200x300 piksel (rasio aspek aslinya dihancurkan).
Di sinilah object-fitproperti masuk. object-fitProperti dapat mengambil salah satu dari nilai berikut:
fill- Ini default. Gambar diubah ukurannya untuk memenuhi dimensi yang diberikan. Jika perlu, gambar akan diregangkan atau diremas agar pascontain- Gambar mempertahankan rasio aspeknya, tetapi diubah ukurannya agar sesuai dengan dimensi yang diberikancover- Gambar mempertahankan rasio aspeknya dan memenuhi dimensi yang diberikan. Gambar akan dipotong agar pasnone- Gambar tidak diubah ukurannyascale-down- gambar diperkecil ke versi terkecil darinoneorcontain
Menggunakan kecocokan objek: penutup;
Jika kita menggunakan object-fit: cover;gambar mempertahankan rasio aspeknya dan memenuhi dimensi yang diberikan. Gambar akan dipotong agar sesuai:
Contoh
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Menggunakan objek-fit: berisi;
Jika kita menggunakan object-fit: contain;gambar mempertahankan rasio aspeknya, tetapi diubah ukurannya agar sesuai dengan dimensi yang diberikan:
Contoh
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Menggunakan objek-fit: isi;
Jika kita menggunakan object-fit: fill;gambar diubah ukurannya untuk mengisi dimensi yang diberikan. Jika perlu, gambar akan diregangkan atau diremas agar pas:
Contoh
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Menggunakan kecocokan objek: tidak ada;
Jika kita menggunakan object-fit: none;gambar yang tidak diubah ukurannya:
Contoh
img {
width: 200px;
height:
300px;
object-fit: none;
}
Menggunakan object-fit: scale-down;
Jika kita menggunakan object-fit: scale-down;gambar diperkecil ke versi terkecil noneatau
contain:
Contoh
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
Contoh lain
Di sini kita memiliki dua gambar dan kita ingin mereka mengisi lebar 50% dari jendela browser dan 100% dari tingginya.
Dalam contoh berikut, kami TIDAK menggunakan object-fit, jadi ketika kami mengubah ukuran jendela browser, rasio aspek gambar akan dimusnahkan:
Contoh
Dalam contoh berikutnya, kami menggunakan object-fit: cover;, jadi ketika kami mengubah ukuran jendela browser, rasio aspek gambar dipertahankan:
Contoh
CSS object-fit Lebih Banyak Contoh
Contoh berikut menunjukkan semua kemungkinan nilai object-fitproperti dalam satu contoh:
Contoh
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Objek CSS-* Properti
Tabel berikut mencantumkan properti objek-* CSS:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |