Latihan 2: Aspect Ratio — CSS
Latihan 2 dari materi Aspect Ratio di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
.avatar sekarang selebar 100px tapi tingginya 0, jadi gak kelihatan. Bikin dia jadi lingkaran:
- Tambahkan
aspect-ratio: 1 / 1; supaya tingginya sama dengan lebarnya (persegi).
- Tambahkan
border-radius: 50%; supaya perseginya jadi lingkaran.
Dua-duanya ditulis di dalam aturan .avatar { } yang sudah ada.
Hint
- Lingkaran itu persegi yang sudutnya dibulatkan penuh. Jadi bikin perseginya dulu, lalu bulatkan.
- Persegi pakai aspect-ratio dengan nilai 1 / 1, lalu sudutnya dibulatkan pakai border-radius: 50%.
- Tambahkan aspect-ratio: 1 / 1; dan border-radius: 50%; di dalam aturan .avatar, sesudah background: coral;
