Question

HTML <img>元素可以具有宽度 / 高度属性，并且它还可以具有CSS 宽度 / 高度属性。

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

HTML属性和CSS属性之间的区别是什么？它们是否具有相同的影响？

Answer 1

关于这个问题的热烈讨论可以在这里找到：Width attribute for image tag versus CSS

总结一下：

声明宽度值的增益和一个高度值（可能不是原始的物理尺寸图像）或来自css声明（如宽度：[valueX];高度： [valueY];）是它有助于加快速度页面的渲染。浏览器知道要分配多少空间页面的特定区域：它会甚至在图像上绘制图像占位符第一次绘制，第一次解析+渲染的页面。当一个人没有定义任何宽度和高度，然后是浏览器必须下载图像然后弄清楚它的尺寸，空间分配然后重新绘制页面。

在我看来，这似乎是最有益的效果。

Answer 2

它们具有相同的效果。

<img width="100" height="100" />已经使用了很长时间，与一个HTML表的widht / height属性相同。

无论是在元素本身还是在CSS中指定它都没有区别，尽管我现在更喜欢使用CSS，因此我可以保持HTML清晰简洁。

以下是http://jsfiddle.net/N2RgB/1/

的示例

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

绝对没有区别。

Answer 3

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

Answer 4

当在 <img> 标签中使用 width 和 height 时：

<img src="xxx.img" width="25" height="25">

然后宽度和高度属性被称为表现属性。

当在 <img> 标签中使用 width 和 height 时：

<img style="width: 16px; height: 16px">

然后 width 和 height 据说是使用内联 CSS 样式

定义的

因此我们可以为 <img> 标签定义 width 和 height 作为表示属性或使用内联 CSS 样式，两种方式我们都会得到相同的结果。

但是将 <img> 的width 和height 定义为表示属性和使用内联之间的唯一区别CSS 样式是，将宽度和高度定义为表示属性是最弱的方法来定义width 和 height 用于 <img> 标记，同时使用内联 CSS 样式定义宽度和高度 是为 <img> 标签定义宽度和高度的最强方法。

因此，如果我们以两种方式定义宽度和高度（即作为表现属性并使用内联CSS样式) 那么 width 和 height 的定义使用内联 CSS 样式 将覆盖 width 的定义和高度作为表现属性

所以基本上<img>标签上的表现属性是一个好主意，但表现属性也很弱，通常被内联CSS样式覆盖

参考检查this

Answer 5

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

为此，我暂时没有使用过图像标签。但是有区别，属性可以相对于图像尺寸，CSS样式属性是绝对的（％，px，em ......）

Answer 6

区别在于语义和一般方法，而不是渲染的工作方式。 :)我个人更喜欢将所有内容（如宽度和高度）集中在CSS类中，并避免使用“宽度”和内联样式（如“style ='width：100px'”）这两个属性，因为它会产生良好的逻辑分离 - HTML标记告诉我们应该显示什么和CSS规则 - 它究竟是什么样子。

Answer 7

我可以看到差异...... 请检查以下代码段：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

Answer 8

你可以试试这个

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

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

和这个

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

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

试试更多，你知道差异

HTML宽度/高度属性与img元素上的CSS width / height属性有什么区别？

8 个答案: