<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.
widthveheightö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,
widthveheightözelliklerinin eklenmesi resmin farklı şekilde oluşturulmasına neden olabilir. Çoğu durumda, mevcut stileheight: autoveyawidth: autoekleyerek 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">