Latihan 1: Object Fit — CSS
Latihan 1 dari materi Object Fit di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Bikin gambar memenuhi bingkai 200 × 200px tanpa gepeng. Di aturan img { } yang masih kosong, tambahkan:
width: 100%height: 100%object-fit: cover
Hasilnya, gambar menutup seluruh bingkai, dan pinggirnya yang kelebihan dipotong.
Hint
- Gambarnya perlu seukuran bingkai dulu, lalu diberi tahu cara mengisinya tanpa ditarik gepeng.
- Di aturan img, pakai width dan height 100% supaya seukuran .frame, lalu object-fit dengan nilai yang menutup penuh dan memotong sisanya: cover.
- img { width: 100%; height: 100%; object-fit: cover; }
