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

Question

Законно использовать этот код:

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

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

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

Answer 1

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

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

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

Answer 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

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

Answer 3

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

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

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

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

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

Answer 4

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

• Перезапись CSS <img> Атрибуции в случае, когда оба присутствуют,
• <img> Атрибуции являются только подсказками для браузера.

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

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

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

Answer 5

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