Latihan 2: Object Fit — CSS
Latihan 2 dari materi Object Fit di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Gambar di editor sudah seukuran bingkai, tapi jadi gepeng. Bikin gambarnya tampil utuh, gak terpotong dan gak gepeng:
- di aturan
img { ... } yang sudah ada, tambahkan object-fit: contain
Ruang kosong di atas dan bawah gambar itu memang hasilnya, karena rasio aslinya dijaga.
Hint
- width dan height 100% menarik foto 800 × 400 jadi persegi, makanya gepeng. Rasio gambarnya perlu dijaga.
- Pakai object-fit di aturan img, dengan nilai yang memuat seluruh gambar dan menyisakan ruang kosong, bukan memotong.
- img { width: 100%; height: 100%; object-fit: contain; }
