What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?
The HTML
<img src="xxx.img" width="16" height="16"
style="width: 16px; height: 16px"></img>
What's the difference between the HTML attribute and CSS property and should they have the same effect?
6 ответов
Горячие споры по этому поводу можно найти здесь: Атрибут ширины для тега изображения по сравнению с CSS
Подводя итог:
Выигрыш от объявления значения ширины и значение высоты (которое может не совпадать с исходными физическими размерами изображения) или из объявлений css (например, width: [valueX]; height: [valueY];) помогает ускорить рендеринг страницы. Браузер знает, сколько места выделить для определенной области страницы: он даже будет рисовать заполнители изображений при первом отрисовке, первом синтаксическом анализе + визуализации страницы. Если ширина и высота не определены, браузер должен загрузить изображение, а затем определить его размеры, место для выделения и затем перерисовать страницу.
На мой взгляд, это наиболее благоприятный эффект.
http://www.w3schools.com/tags/tag_IMG.asp
- Я давно не использовал тег изображения для этой цели. Но есть разница, атрибуты могут относиться к размерам изображений, свойства стиля CSS являются абсолютными (либо%, px, em ...)
вы можете попробовать это
<img src="some_pic.jpg" width="100" />
высота будет изменяться автоматически.
и эта
<img src="some_pic.jpg" style="width:100px" />
высота не будет изменяться автоматически.
попробуйте еще, и вы почувствуете разницу
Я провел сравнение по адресу: http://jsfiddle.net/jF8y6/ с 4 различными состояниями. Основное различие заключается в том, как он используется через внешние таблицы стилей с точки зрения возможности изменять размер изображений для различных таблиц стилей (для настольных компьютеров, мобильных устройств, для печати и т. Д.) И гибкости, которую это дает. Если вы жестко запрограммируете размеры, это лишит гибкости.
Они имеют тот же эффект.
используется в течение долгого времени, то же самое со свойствами ширины / высоты, скажем, .. таблицы HTML.
Нет разницы, указываете ли вы это в самом элементе или в CSS, хотя сейчас я предпочитаю использовать CSS, чтобы сохранить ясность и краткость HTML.
Вот пример http://jsfiddle.net/N2RgB/1/
Я загрузил одно и то же изображение 4 раза, пропорционально и непропорционально с использованием атрибутов HTML И Свойства CSS.
Абсолютно НЕТ разницы.
Разница в семантике и общем подходе, а не в том, как будет работать рендеринг. :) Лично я предпочитаю концентрировать все вещи, такие как ширина и высота, в классах CSS и избегать использования как атрибутов, таких как «ширина», так и встроенных стилей, таких как «style = 'width: 100px'», просто потому, что это приводит к хорошему логическому разделению - HTML разметка говорит, что должно отображаться, а правила CSS — как именно это будет выглядеть.