Какая разница между атрибутом width/height HTML и свойством width/height CSS в элементе img?

Элемент HTML <img> может иметь атрибут width/height, а также может иметь свойства CSS width/height :

<img src="xxx.img" width="16" height="16"
style="width: 16px; height: 16px"></img>

В чем разница между атрибутом HTML и свойством CSS и должны ли они иметь одинаковый эффект?

Ответы

Ответ 1

Горячие дебаты по этому вопросу можно найти здесь: Атрибут ширины для тега изображения по сравнению с CSS

Подводя итог:

Выигрыш от объявления значения ширины и значения высоты (которое может не соответствовать исходным физическим размерам изображения) или объявлений CSS (например, width: [valueX]; height: [valueY];) заключается в том, что это помогает ускорить рендеринг страницы. Браузер знает, сколько места нужно выделить для определенной области страницы: он даже будет рисовать заполнители изображения при первом рисовании, первом анализе + рендеринг страницы. Если не указывать ширину и высоту, браузер должен загрузить изображение, а затем определить его размеры, пространство для размещения и перерисовать страницу.

На мой взгляд, это самый полезный эффект.

Ответ 2

Они имеют такой же эффект.

<img width="100" height="100"/> используется в течение длительного времени, то же самое с свойствами widht/height, например.. HTML-таблицы.

Нет никакой разницы, указываете ли вы его на самом элементе или внутри CSS, хотя теперь я предпочитаю использовать CSS, чтобы я мог держать HTML ясным и кратким.

Вот пример http://jsfiddle.net/N2RgB/1/

Я загрузил одно и то же изображение 4 раза, пропорционально и непропорционально, используя атрибуты HTML и свойства CSS.

Нет абсолютно никакой разницы.

Ответ 3

Я сделал сравнение на: http://jsfiddle.net/jF8y6/ с 4 различными состояниями. Основное отличие заключается в том, как он используется через внешние таблицы стилей с точки зрения возможности изменять размер изображений для разных таблиц стилей (рабочий стол, мобильный, печатный и т.д.) И гибкость, которую он приносит. Если вы жестко задаете размеры, то это останавливает гибкость.

Ответ 4

http://www.w3schools.com/tags/tag_IMG.asp

Я не использовал тег изображения через некоторое время для этой цели. Но есть разница, атрибуты могут быть относительно размеров изображений, свойства стиля CSS абсолютны (либо%, px, em...)

Ответ 5

Разница заключается в семантическом и общем подходе, а не в том, как будет работать рендеринг.:) Я лично предпочитаю концентрировать все вещи, такие как ширина и высота в классах CSS, и избегать использования обоих атрибутов, таких как "ширина" и встроенные стили, такие как "style = 'width: 100px", только потому, что это приводит к хорошему логическому разделению - HTML markup сообщает, что должно отображаться, и правила CSS - как именно он будет выглядеть.

Ответ 6

Я вижу разницу... Проверьте, что следующий фрагмент кода украден из: http://jqueryui.com/resources/demos/button/icons.html

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Button - Icons</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<!-- redefine source of background-image -->
<style>
    .ui-icon { width: 64px; height: 64px; }
</style>

<script type="text/javascript" >
$(function(){
    $("img").button({
        icons: {
            primary: "ui-icon-locked"
        },
        text: false
    });
});
</script>
</head>
<body>

<img width="32px" height="32px"> <!-- size of img tag -->

</body>
</html>

Это результат:

Ответ 7

вы можете попробовать это

<img src="some_pic.jpg" width="100" />

высота будет автоматической.

и этот

<img src="some_pic.jpg" style="width:100px" />

высота не будет автоматической.

попробуйте еще раз, и вы знаете разницу