Установка атрибутов width и height в тегах <img> помогает предотвратить сдвиги макета . Эта информация позволяет браузеру зарезервировать для изображения правильное количество места.
Установите атрибуты
widthиheight. Значения этих атрибутов должны быть установлены так, чтобы они соответствовали размерам самого изображения (то есть его внутреннему размеру ), а не размерам, с которыми изображение будет отображаться.При необходимости настройте стиль изображения. В зависимости от существующего стиля изображения добавление атрибутов
widthиheightможет привести к тому, что изображение будет отображаться по-другому. Во многих случаях это можно исправить, добавив к существующему стилюheight: autoилиwidth: auto.
| Предыдущий стиль CSS | Изменить на |
|---|---|
| img {ширина: 100%; } | img {ширина: 100%; высота: авто; } |
| img { максимальная ширина: 100%; } | img { максимальная ширина: 100% высота: авто; } |
| img {высота: 100%; } | img {высота: 100%; ширина: авто } |
HTML
<img width="267" height="400" src="dog.jpg">