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