ImagesLesson 84Preview gratis
Responsive Images
Lesson ini bagian dari How To · Semua level
Ringkasan
Responsive image menyesuaikan ukurannya dengan lebar kontainer agar tidak meluber di layar kecil. Aturan dasar max-width: 100% dan height: auto sudah membuat gambar berskala proporsional. Untuk performa, srcset dan sizes memungkinkan browser memilih berkas gambar yang paling sesuai.
Poin kunci
- max-width: 100% mencegah gambar melebihi lebar kontainer.
- height: auto menjaga rasio asli gambar.
- srcset menyediakan beberapa ukuran gambar untuk dipilih browser.
- sizes memberi petunjuk lebar tampilan gambar pada berbagai kondisi viewport.
- Elemen picture berguna untuk art direction atau format gambar alternatif.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.