<изображение> ярлык

Установка атрибутов 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">