img元素上的HTML width / height属性和CSS width / height属性之间有什么区别？


What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?

HTML 元素可以具有width / height属性，还可以具有CSS width / height属性：

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

HTML属性和CSS属性之间有什么区别，它们应具有相同的效果吗？

可以在此处找到有关该主题的热门讨论：图像标签和CSS的Width属性

把它们加起来：

The gain from declaring a width value and an height value (which may not be the original physical dimensions of the image) or from css declarations (like width: [valueX]; height: [valueY];) is that it helps speed up the rendering of the page. The browser knows how much space to allocate a particular area of the page: it will even draw image placeholders on a first draw, a first parsing+rendering of the page. When one does not define any width and height, then the browser has to download the image and then figure out its dimensions, space to allocate and then redraw the page.

我认为这似乎是最有益的效果。

相关讨论

它们具有相同的效果。

已经使用了很长时间，与HTML表格的widht / height属性相同。

无论是在元素本身上还是在CSS中指定都没有什么区别，尽管我现在更喜欢使用CSS，这样我可以使HTML简洁明了。

这是一个示例http://jsfiddle.net/N2RgB/1/

我已经使用HTML属性和CSS属性将相同的图像按比例和非比例加载了4次。

绝对没有区别。

相关讨论

我在以下网址进行了比较：http://jsfiddle.net/jF8y6/，有4种不同的状态。主要区别在于，通过外部样式表使用它的方式可以调整不同样式表(桌面，移动，打印等)的图像大小，并带来灵活性。如果您对尺寸进行硬编码，则将失去灵活性。

我可以看到一个不同...
检查以下代码片段是否从以下位置被盗：http://jqueryui.com/resources/demos/button/icons.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
jQuery UI Button - Icons
<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 src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">

<!-- 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
    });
});

</head>
<body>

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

</body>
</html>

结果如下：

enter image description here

区别在于语义和通用方法，而不是呈现方式如何工作。 :)我个人更喜欢在CSS类中集中所有宽度和高度之类的东西，避免同时使用" width"之类的属性和" style ='width：100px'"之类的内联样式，因为这会导致逻辑上的分离-HTML标记说明应显示的内容和CSS规则-外观如何。

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

  • 我已经有一段时间没有使用image标签了。
    但是有一个区别，属性可以相对于图像尺寸，CSS样式属性是绝对的(％，px，em ...)
相关讨论

你可以试试这个

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

它的高度将自动调整大小。

还有这个

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

它的高度不会自动调整大小。

尝试更多，您就会知道区别

相关讨论