<分区>
我正在阅读响应式设计，我注意到以下问题:
关于“流体图像”的建议之一是使用 CSS 规则，例如:
img {
max-width: 100%;
height: auto; }
但为了让它产生正确的效果，我们需要去掉 img 标签的内联图像宽度和高度属性。
如何解决 It’s important to specify the width and height of an image in HTML ？
谢谢
<分区>
我正在阅读响应式设计，我注意到以下问题:
关于“流体图像”的建议之一是使用 CSS 规则，例如:
img {
max-width: 100%;
height: auto; }
但为了让它产生正确的效果，我们需要去掉 img 标签的内联图像宽度和高度属性。
如何解决 It’s important to specify the width and height of an image in HTML ？
谢谢
最佳答案
尽管(正如我在其他回答中所述)width 和 height 属性不会干扰流体图像，但流体图像会干扰尚未加载的图像在 Chrome 以外的浏览器中占用适当的空间。有一个解决方法:将图像包装在具有固有比例的 div 中，如本文所述:http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
.img-wrapper {
max-width: 200px; /* The actual width of the image */
}
.img-wrapper2 {
height: 0;
padding-bottom: 100%; /* The image's height divided by its width */
}
不幸的是，这需要两个包装 div，才能获得正确的最大宽度效果。但是，它确实提供了 width 和 height 属性所提供的明显加载速度相同的优势。你可能想给 .img-wrapper overflow: hidden 来隐藏旧版 IE 的一些病态行为。
jsFiddle:http://jsfiddle.net/7j3db/32/
关于html - 响应式图片 vs 在 HTML 中指定图片的宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10847905/