В чем разница между атрибутом ширины / высоты HTML и свойством ширины / высоты CSS элемента img? - PullRequest
Новая
       47

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

23 голосов
/ 25 августа 2010

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

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

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

Ответы [ 7 ]

12 голосов
/ 25 августа 2010

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

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

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

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

8 голосов
/ 25 августа 2010

Они имеют одинаковый эффект.

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

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

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

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

Абсолютно НЕТ разницы.

1 голос
/ 25 августа 2010

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

0 голосов
/ 19 ноября 2013

Я вижу разницу ... Проверьте следующий фрагмент кода, украденный у: 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>

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

enter image description here

0 голосов
/ 25 августа 2010

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

0 голосов
/ 25 августа 2010

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

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

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

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

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

, а эта 

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

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

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

...