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

Question

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

41

HTML中的<img>元素可以有width / height属性，也可以拥有CSS的width / height属性：

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

HTML属性和CSS属性有什么区别，它们是否应该具有相同的效果？

- Morgan Cheng

8个回答

11

它们具有相同的效果。

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

在元素本身上指定还是在 CSS 中指定都没有区别，不过我现在更倾向于使用 CSS，这样我可以保持 HTML 简洁明了。

以下是一个例子http://jsfiddle.net/N2RgB/1/

我加载了同一张图片 4 次，并使用了 HTML 属性和 CSS 属性进行等比例和非等比例的缩放。

绝对没有任何区别。

- Marko

我听说CSS正在成为标准，因此<img>属性可能会在某个时候被弃用。 - heltonbiker

4

根据我的实验结果，如果属性与样式不一致，那么样式会覆盖属性。(适用于Firefox和Chrome浏览器) - wberry

3

当然有区别。浏览器总是先下载 HTML，然后再下载样式表，这意味着你可以使用属性来保留一些宽度，然后在想要追求用户体验时再应用正确的样式。 - KinoP

我发现的其中一个区别是当你使用延迟加载时：https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes。 - microHoffman

5

在 <img> 标签中使用 width 和 height 属性：

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

那么 width 和 height 属性被称为 表现属性。

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

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

如果使用内联CSS样式，则说可以使用内联CSS样式定义宽度和高度

因此，我们可以将<img>标记的宽度和高度定义为展示属性或使用内联CSS样式，以两种方式都将得到相同的结果。

但是，使用展示属性定义<img>的宽度和高度与使用内联CSS样式的唯一区别在于，使用展示属性定义<img>的宽度和高度是定义<img>标记的宽度和高度的最弱方法，而使用内联CSS样式定义<img>的宽度和高度是定义<img>标记的宽度和高度的最强方法。

因此，如果我们以两种方式（即为展示属性和使用内联CSS样式）定义宽度和高度，则使用内联CSS样式定义的宽度和高度将覆盖使用展示属性定义的宽度和高度

因此，基本上在<img>标记中使用展示属性是一个好主意，但展示属性也很弱，通常会被内联CSS样式覆盖。

有关参考，请查看这里

- Prateek Gupta

2

我在http://jsfiddle.net/jF8y6/上进行了比较，包括4种不同的状态。最大的区别是通过外部样式表使用时，可以针对不同的样式表（桌面、移动、打印等）调整图像大小并带来的灵活性。如果硬编码尺寸，则会降低其灵活性。

- Alex

0

我可以看到一个区别... 检查以下代码片段，它是从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

- user2928048

0

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

我已经有一段时间没有使用图像标签来实现这个目的了。但是有一个区别，属性可以相对于图像尺寸，CSS样式属性是绝对的（无论是％、px、em...）

- Tom

2

你如何使用相对于图像尺寸的维度？我感到困惑。 - Marko

0

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

- dimarzionist

-1

你可以试试这个

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

它的高度将自动调整。

还有这个

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

它的高度不会自动调整。

多试试，你就会知道区别了。

- Tim Li

什么是自动大小？这两个属性是相同的。 - Marko

1

我刚刚试过了。还是一样的。抱歉我的错误。 - Tim Li

你试过了吗？在CSS中设置属性之一（宽度或高度）仍会使图像按比例调整大小。 - Marko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ibrahim AshShohail · Accepted Answer

这里有一个有关主题的热议：图像标签的宽度属性与CSS

总结一下：

声明宽度和高度值（可能不是图像的原始物理尺寸），或使用css声明（例如width：[valueX]；height：[valueY]；）所获得的收益是有助于加快页面的呈现速度。浏览器知道为页面的特定区域分配多少空间：甚至会在第一次绘制、第一次解析+呈现页面时绘制图像占位符。如果没有定义任何宽度和高度，则浏览器必须下载图像，然后计算其尺寸、分配空间，然后重新绘制页面。

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