<img> etiketi

<img> etiketlerinde width ve height özelliklerinin ayarlanması, düzen kaymalarını önlemeye yardımcı olur. Bu bilgiler, tarayıcının resim için doğru miktarda alanı ayırmasına olanak tanır.

  • width ve height özelliklerini ayarlayın: Bu özelliklerin değerleri, resmin gösterileceği boyutlar yerine resmin boyutlarıyla (yani dışsel boyutu) eşleşecek şekilde ayarlanmalıdır.

  • Resim stilini gerektiği gibi ayarlayın: Resmin mevcut stiline bağlı olarak, width ve height özelliklerinin eklenmesi resmin farklı şekilde oluşturulmasına neden olabilir. Çoğu durumda, mevcut stile height: auto veya width: auto ekleyerek bu sorunu düzeltebilirsiniz.

Önceki CSS stili Şununla değiştir:
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">