Atribut CSS object-fit
- Halaman sebelumnya Gaya gambar CSS
- Halaman berikutnya object-position CSS
CSS object-fit Atribut digunakan untuk menentukan cara pengaturan ukuran <img> atau <video> untuk memadai kontainer.
Dukungan browser
Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuh.
| Atribut | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Atribut CSS object-fit
CSS object-fit digunakan untuk menentukan cara pengaturan ukuran <img> atau <video> untuk memadai kontainer.
Properti ini mengatakan bagaimana konten diisi dalam kontainer dengan cara yang berbeda. Misalnya, "pertahankan proporsi lebar dan tinggi" atau "perluas dan mengambil sebagian besar ruang yang dimungkinkan".
Lihat gambar tulang tulang di bawah ini dari Shanghai Flower Port, yang berukuran 300x300 pixel:
Namun, jika kita mengatur gambar di atas menjadi 200x300 pixel, maka ia akan terlihat seperti ini:
Contoh
img {
width: 200px;
height: 300px;
}
kami melihat bahwa gambar disampingkan untuk memadai kontainer 200x300 pixel, dan proporsi lebar asli rusak.
Jika kita menggunakan object-fit: cover;yang akan memotong sisi gambar, mempertahankan proporsi lebar dan tinggi, dan mengisi ruang seperti ini:
Contoh
img {
width: 200px;
height: 400px;
object-fit: cover;
}
Contoh lain
Disini, kita memiliki dua gambar, dan kita ingin mereka mengisi 50% lebar dan 100% tinggi jendela browser.
Dalam contoh berikutnya, kita tidak menggunakan object-fitJadi, ketika kita mengatur ukuran jendela browser, proporsi lebar dan tinggi gambar akan rusak:
Contoh
Dalam contoh berikutnya, kita menggunakan object-fit: cover;Jadi, ketika kita mengatur ukuran jendela browser, proporsi lebar dan tinggi gambar akan dipertahankan:
Contoh
Semua nilai CSS object-fit
object-fit Atribut dapat menerima nilai berikut:
fill- Nilai default. Atur ukuran konten yang diganti untuk mengisi kotak konten elemen. Jika perlu, tentukan perluasan atau penekanan objek untuk memadai objek ini.contain- Skalakan konten yang diganti untuk mempertahankan proporsi panjang dan lebar, serta masukkan ke dalam kotak konten elemen.cover- Atur ukuran ganti konten untuk mempertahankan proporsi lebar dan tinggi saat mengisi kotak konten elemen. Objek ini akan dipotong untuk memadai.none- Tidak mengatur ukuran konten yang digantikan.scale-down- Menyesuaikan ukuran konten seperti belum disebutkan konten atau mengandung konten (akan mengakibatkan ukuran objek yang lebih kecil)
Contoh di bawah ini menunjukkan object-fit Semua nilai yang mungkin untuk properti:
Contoh
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- Halaman sebelumnya Gaya gambar CSS
- Halaman berikutnya object-position CSS
