HTML <img>
元素可以具有width / height属性,也可以具有CSS width / height属性:
<img src="xxx.img" width="16" height="16"
style="width: 16px; height: 16px"></img>
HTML属性和CSS属性之间有什么区别?它们应该具有相同的效果吗?
发布于 2010-08-25 14:53:17
关于这个话题的激烈辩论可以在这里找到:Width attribute for image tag versus CSS
总结一下:
宽度声明和高度值(可能不是图像的原始物理尺寸)或css声明(如
:valueX;height: valueY;)的好处在于,它有助于加速页面的呈现。浏览器知道为页面的特定区域分配多少空间:它甚至会在第一次绘制时绘制图像占位符,这是页面的第一个parsing+rendering。当用户没有定义任何宽度和高度时,浏览器必须下载图像,然后确定其尺寸、分配的空间,然后重新绘制页面。
在我看来,这似乎是最有益的效果。
发布于 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次,包括成比例和非成比例。
绝对没有区别。
发布于 2010-08-25 09:55:00
我在上面做了一个比较:http://jsfiddle.net/jF8y6/有4个不同的州。主要区别在于它通过外部样式表使用的方式,即为不同的样式表(桌面、移动、打印等)调整图像大小的能力以及它带来的灵活性。如果你硬编码大小,那么它就停止了灵活性。
https://stackoverflow.com/questions/3562296
复制相似问题