HTML5 - Можно ли использовать ширину и высоту в IMG?

Право использования этого кода:

<img src="...(here image)...." width="50px" height="50px" />

Или мне нужно использовать:

<img src="...(here image)..." style="width: 50px; height: 50px;" />

Ответ 1

Первое использование рекомендуется как подсказки для рендеринга браузера, второй работает.

В первой форме вы не должны добавлять 'px'.

http://www.w3.org/TR/html5/embedded-content-0.html#dimension-attributes

Ответ 2

В соответствии со спецификацией HTML 5:

Атрибуты width и height на img... могут быть указаны, чтобы дать размеры визуального содержимого элемента

Источник: http://www.w3.org/TR/2011/WD-html5-20110113/the-map-element.html#dimension-attributes

Также, согласно спецификации HTML 5, все элементы могут иметь атрибуты стиля. Источник: http://www.w3.org/TR/html5/elements.html#the-style-attribute

Поэтому, поскольку оба разрешены, вы можете выбрать, какой из них подходит вашей фантазии.

Ответ 3

CSS, примененный к 'img', перезапишет базовые атрибуты ширины и высоты html в тегах изображений.

<style>
   img {
      width: 100%;
      height: auto;
   }
</style>

<img src="assets/img/logo.png" width="500" height="100">

Приведенный выше код приведет к тому, что изображение будет растягиваться по всей ширине его контейнера, а его высота будет относительной к его ширине.

Этот подход полезен, если вы загружаете графику, подходящую для сетчатки, из режима get-go.

Ответ 4

Предпочтителен стиль = путь... на самом деле было бы даже лучше, если бы вы переместили этот стиль в файл css или тег стиля в своем заголовке.

Ответ 5

Как уже упоминалось:

CSS overwrite <img> attrinutes в случае, когда оба присутствуют,
<img> attrinutes - это только подсказки для браузера.

Другим отличием является использование единиц:

в HTML5 атрибуты width и height должны быть целыми числами без единиц, которые интерпретируются как пиксели CSS. На практике броузеры терпят % (это справедливо в HTML4), но если вы поместите что-то вроде width="5cm", оно будет интерпретировано как width="5" (т.е. 5px).
При использовании CSS допустимы любые единицы длины и не целочисленные числа, например width: 5.5cm - это нормально. И вы должны использовать единицы (например, width: 5 не является допустимой шириной CSS).

Итак, IMO, вы должны использовать CSS, если это возможно.