CSS ResponsiveLesson 92Preview gratis
RWD Images
Lesson ini bagian dari CSS · Semua level
Ringkasan
Gambar responsif tidak boleh meluber melebihi wadahnya, sehingga pola dasarnya adalah `max-width: 100%` dipadukan dengan `height: auto` agar rasio aspek tetap terjaga. Untuk hasil lebih optimal, tersedia atribut `srcset` dan elemen `<picture>` agar browser memilih sumber gambar yang paling pas dengan layar dan format yang didukung.
Poin kunci
- `max-width: 100%` mencegah gambar melebihi lebar wadah
- `height: auto` menjaga rasio aspek saat lebar berubah
- `srcset` menyediakan beberapa resolusi untuk dipilih browser
- `<picture>` memungkinkan sumber berbeda per browser atau per breakpoint
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.