← CSS34 / 62
Gambar yang tidak meluber
Gambar dengan lebar asli 2000px akan merusak layout mobile. Perbaikan bakunya dua baris: max-width: 100% (jangan melebihi wadahnya) dan height: auto (jaga rasio agar tidak gepeng). Ini salah satu aturan pertama yang ditulis di hampir setiap proyek nyata. Tambahkan display: block bila muncul jarak kecil di bawah gambar — celah itu berasal dari sifat inline yang menyisakan ruang untuk garis dasar teks.
👀 Contoh dulu
/* aturan yang hampir selalu ditulis di setiap proyek */
img, video {
max-width: 100%;
height: auto;
}Hasilnya: Gambar selebar 3000px otomatis menyusut agar pas di wadahnya, dengan proporsi tetap terjaga.
💡 Pakai max-width (bukan width) agar gambar kecil tidak dipaksa membesar sampai pecah.
📝 Sekarang giliranmu
Buat img responsif dengan max-width: 100% dan height: auto.
Preview