Question

我正在阅读有关响应式设计的内容，我注意到以下问题：

关于＆＃34; Fluid Images＆＃34;的建议之一是使用CSS规则，如：

img {
max-width: 100%;
height: auto; }

但是为了使它具有正确的效果，我们需要去除img标签的内嵌图像宽度和高度属性。

如何解决It’s important to specify the width and height of an image in HTML？

由于

Answer 1

虽然（正如我在其他答案中所述）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/

Answer 2

您无需剥离图像宽度和高度属性。

jsFiddle：http://jsfiddle.net/7j3db/

在Chrome，Firefox，Opera，IE9和IE9中测试，模拟IE7。使用您提到的确切CSS规则似乎可以在所有这些中正常工作。

编辑：使用无法加载的图片进行测试：http://jsfiddle.net/7j3db/1/

这在Chrome和IE（甚至IE7）中有适当的效果，但在Firefox或Opera中没有。但是，即使在Firefox和Opera中，效果也比省略宽度和高度属性要好（因为宽度属性仍然有效，即使高度属性没有）。

使用alt文本进一步测试（http://jsfiddle.net/7j3db/2/）：IE7完美处理，但IE9加入Opera，IE8做了一些非常奇怪的事情（图像高度取决于替代文字的长度 - 更多alt文本，空间越小）。 Chrome似乎完全忽略了alt文本。 Opera和FF显示alt文本，但在其他方面具有与之前基本相同的行为。宽度和高度属性似乎不对任何这些alt文本问题负责（但在IE8中，在某种程度上除外）。

Answer 3

您可以通过添加

来实现此目的

html, body{
max-width:100%;
width:100%;
}

并将这些属性放在img标记的父div上。

响应式图像vs指定HTML中图像的宽度和高度

3 个答案: