Belajar CSS object fit

belajar css

CSS3 object-fit

Pada CSS3 terdapat fitur baru yaitu property object-fit. Dengan property object-fit ini Anda bisa menggunakannya untuk menentukan bagaimana <img> atau <video> harus diubah ukurannya agar sesuai dengan wadahnya seperti “pertahankan rasio aspek” dan mengambil ruang sebanyak mungkin”.

Memberikan lebar dan tinggi pada gambar

Pada contoh dibawah ini kita akan memberikan style berupa tinggi dan lebar pada gambar, dan kita bandingkan yang satu menggunakan property object-fit dengan nilai cover dan yang satunya tanpa menggunakan object-fit. Dengan begitu kita bisa melihat perbedaanya.

Contoh:

Editor Online
  1. #gambar1 {
  2. width: 70%;
  3. height: 300px;
  4. }
  5. #gambar2 {
  6. width: 70%;
  7. height: 300px;
  8. object-fit: cover;
  9. }

Semua nilai property object-fit

Pada contoh diatas kita sudah menggunakan property object-fit dengan nilai cover. Perlu Anda ingat bahwa property object-fit bisa mempunyai nilai selain cover seperti:

  • fill – Ini standar. Konten yang diganti akan berukuran untuk mengisi kotak konten elemen. Jika perlu, objek akan diregangkan atau ditekan agar sesuai
  • contain – Konten yang diganti diskalakan untuk mempertahankan rasio aspeknya sementara didalam kotak konten elemen
  • cover – Konten yang diganti berukuran untuk mempertahankan rasio aspeknya sambil mengisi seluruh kotak konten elemen. Objek akan dipotong agar sesuai
  • none – Konten yang diganti tidak diubah ukurannya
  • scale-down – Konten berukuran seolah-olah tidak ada

Contoh berikut menunjukkan semua nilai yang dari property object-fit:

Contoh:

Editor Online
  1. .fill {object-fit: fill;}
  2. .contain {object-fit: contain;}
  3. .cover {object-fit: cover;}
  4. .scale-down {object-fit: scale-down;}
  5. .none {object-fit: none;}

Leave a Reply

Your email address will not be published. Required fields are marked *