我正在阅读有关响应式设计的内容，我注意到以下问题：
关于“流体图像”的建议之一是使用 CSS 规则，例如：
img {
max-width: 100%;
height: auto; }
但为了让它产生正确的影响，我们需要去除 img 标签的内联图像宽度和高度属性。
It’s important to specify the width and height of an image in HTML 如何解决？
谢谢
【问题讨论】：
你可以通过添加来实现这一点
html, body{
max-width:100%;
width:100%;
}
并将这些属性放在 img 标签的父 div 上。
【讨论】：
height:auto 保持所有图像的比例。
虽然（正如我在其他答案中所述）width 和 height 属性不会干扰流体图像，但流体图像确实会干扰尚未加载的图像在其他浏览器中占用适当的空间比铬。有一种解决方法：将图像包装在具有固有比率的 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-wrapperoverflow: hidden 隐藏旧版IE的一些病态行为。
jsFiddle：http://jsfiddle.net/7j3db/32/
【讨论】：
您不需要剥离图像的宽度和高度属性。
jsFiddle：http://jsfiddle.net/7j3db/
在 Chrome、Firefox、Opera、IE9 和 IE9 模拟 IE7 中测试。使用您提到的确切 CSS 规则，它们似乎都可以正常工作。
编辑：使用无法加载的图像进行测试：http://jsfiddle.net/7j3db/1/
这在 Chrome 和 IE（甚至 IE7）中具有正确的效果，但在 Firefox 或 Opera 中却没有。但是，即使在 Firefox 和 Opera 中，效果也比不考虑 width 和 height 属性要好（因为 width 属性仍然有效，尽管 height 属性没有）。
使用 alt 文本进行进一步测试 (http://jsfiddle.net/7j3db/2/)：IE7 完美处理，但 IE9 加入了 Opera，而 IE8 做了一些非常奇怪的事情（图像高度取决于 alt 文本的长度 - alt 文本越多，越少空间）。 Chrome 似乎完全忽略了替代文本。 Opera 和 FF 显示 alt 文本，但在其他方面与之前的行为基本相同。然而，width 和 height 属性似乎与这些 alt 文本问题无关（在某种程度上，IE8 除外）。
【讨论】：
display: inline-block 使其表现得像 Opera。
height: auto），则完全忽略“height=”。