Cara Mudah Membuat Image Menjadi Responsive dengan CSS

Kita bisa mengatur gambar yang dimasukkan ke web menjadi responsive.

Artinya, ukuran gambar akan menyesuaikan dengan device yang digunakan.

Secara sederhana kita mengatur panjang width gambar menjadi satuan css yang relative.

Properti width

Atur panjang menjadi 100%, dengan tinggi auto.

img {
  width: 100%;
  height: auto;
}

Berbeda dengan width, kalau max-width adalah ukuran maksimal gambar yang diperbolehkan.

Misal, max-width 500px, lalu gambar kita hanya 400px maka ukurannya tetap 400px.

Tetapi, jika gambar berukuran 700px, maka gambar akan diresize menjadi 500px.

img {
  max-width: 100%;
  height: auto;
}