Размер HTML5 тега img

Question

Каков более «правильный» способ определения ширины и высоты <img>?Будет ли это каталог через тег с его атрибутами "width" и "height", или лучше сделать это через CSS img { width:...; height... }?

Answer 1

Для одного уникального изображения контента, которое будет использовано, нет причин не использовать встроенные атрибуты width / height.Они все еще действительны, даже в строгом.

Обстоятельства Правило CSS было бы лучше:

• есть несколько экземпляров изображения или несколько изображений всетакой же размер.Правило позволит вам сократить количество разметки, которую нужно написать;

• изображение является частью макета, а не содержимого;другая таблица стилей может захотеть изменить ее размер;

• Возможно, я захочу использовать более сложные правила определения размера, чем позволяют атрибуты width / height, например % -sizing или max-width.

Answer 2

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

Из спецификации :

"Требования автора: атрибуты ширины и высоты в img, iframe, embed, object, video и, когда атрибут их типа находится в состоянии кнопки изображения, можно указать элементы ввода, чтобы получитьРазмеры визуального содержания элемента ".

Answer 3

Оба способа отлично . Атрибуты width и height являются необязательными. Если ничего не указано, будут использованы размеры ресурса.

Я бы предпочел указать их в надлежащих атрибутах width и height, поскольку они тесно связаны с используемым src. Не имеет смысла хранить их в таблице стилей.

Из спецификации (выделено мое):

Атрибуты ширины и высоты для элементов img, iframe, .... и input могут указываться , чтобы дать размеры визуального содержимого элемента (соответственно ширину и высоту относительно номинальное направление выходного носителя), в пикселях CSS. Атрибуты, если они указаны, должны иметь значения, которые являются действительными неотрицательными целыми числами.

Answer 4

Вы всегда должны предпочитать CSS атрибутам HTML.HTML предназначен для определения структуры, а CSS сообщает браузеру, как ее визуализировать.

Answer 5

Оба способа являются «правильными».

Использование зависит от личных предпочтений или политических (корпоративных) решений.

Я сам считаю, что лучше поместить его в CSS.

Answer 6

Все стили элементов должны быть выполнены с использованием CSS.Атрибуты высоты и ширины в большинстве случаев считаются недействительными.Таким образом, вы отделяете стиль и макет от функции.Это также должно привести к более чистому HTML-коду и меньшим файлам.