首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML的width / height属性和img元素上的CSS width / height属性有什么不同?

HTML的width / height属性和img元素上的CSS width / height属性有什么不同?
EN

Stack Overflow用户
提问于 2010-08-25 09:48:12
回答 8查看 11.8K关注 0票数 29

HTML <img>元素可以具有width / height属性,也可以具有CSS width / height属性:

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

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

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2010-08-25 14:53:17

关于这个话题的激烈辩论可以在这里找到:Width attribute for image tag versus CSS

总结一下:

宽度声明和高度值(可能不是图像的原始物理尺寸)或css声明(如

:valueX;height: valueY;)的好处在于,它有助于加速页面的呈现。浏览器知道为页面的特定区域分配多少空间:它甚至会在第一次绘制时绘制图像占位符,这是页面的第一个parsing+rendering。当用户没有定义任何宽度和高度时,浏览器必须下载图像,然后确定其尺寸、分配的空间,然后重新绘制页面。

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

票数 13
EN

Stack Overflow用户

发布于 2010-08-25 09:55:56

:它们具有相同的效果。

<img width="100" height="100" />已经被使用了很长一段时间,它的widht/height属性也是如此。一个HTML表格。

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

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

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

绝对没有区别。

票数 10
EN

Stack Overflow用户

发布于 2010-08-25 09:55:00

我在上面做了一个比较:http://jsfiddle.net/jF8y6/有4个不同的州。主要区别在于它通过外部样式表使用的方式,即为不同的样式表(桌面、移动、打印等)调整图像大小的能力以及它带来的灵活性。如果你硬编码大小,那么它就停止了灵活性。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3562296

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档