Tag <img>

Menetapkan atribut width dan height pada tag <img> akan membantu mencegah pergeseran tata letak. Dengan informasi ini, browser dapat menentukan jumlah ruang yang benar untuk gambar.

  • Setel atribut width dan height: Nilai atribut ini harus disetel agar sesuai dengan dimensi gambar itu sendiri (yaitu, ukuran intrinsiknya) - bukan dimensi yang menjadi acuan untuk menampilkan gambar.

  • Sesuaikan gaya visual gambar sesuai kebutuhan: Bergantung pada gaya visual gambar yang ada, menambahkan atribut width dan height dapat menyebabkan gambar dirender secara berbeda. Dalam banyak kasus, hal ini dapat diperbaiki dengan menambahkan height: auto atau width: auto ke gaya yang ada.

Gaya CSS sebelumnya Ubah menjadi
img { width: 100%; } img { width: 100%; height: auto; }
img { max-width: 100%; } img { max-width: 100% height: auto; }
img { height: 100%; } img { height: 100%; width: auto }

HTML

<img width="267" height="400" src="dog.jpg">