响应式图像 vs 在 HTML 中指定图像的宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10847905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive Image vs specify the width and height of an image in HTML
提问by ProgNet
I am reading about responsive design and I noticed the following problem:
我正在阅读有关响应式设计的内容，并注意到以下问题：
One of the recommendations regarding "Fluid Images" is to use a CSS rule such as :
关于“流体图像”的建议之一是使用 CSS 规则，例如：
img {
max-width: 100%;
height: auto; }
but in order for it to have the right affect we need to strip inline image width and height attributes of the img tag.
但是为了让它产生正确的影响，我们需要去除 img 标签的内嵌图像宽度和高度属性。
How that settle with It's important to specify the width and height of an image in HTML?
Thanks
谢谢
回答by Brilliand
Although (as I stated in my other answer) the widthand heightattributes do not interfere with fluid images, fluid images do interfere with not-yet-loaded images taking up the proper amount of space in browsers other than Chrome. There is a workaround for this: wrap the image in a div with an intrinsic ratio, as described in this article: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
尽管（正如我在其他答案中所述）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 */
}
Unfortunately this requires two wrapper divs, in order to get the max-width effect right. However, it does provide the same advantages to apparent loading speed that the widthand heightattributes provide. You may want to give .img-wrapperoverflow: hiddento hide some of the pathological behavior of older IE.
不幸的是，这需要两个包装 div，以获得正确的最大宽度效果。但是，它确实提供了与width和height属性提供的明显加载速度相同的优势。你可能想要.img-wrapperoverflow: hidden隐藏一些老IE的病态行为。
jsFiddle: http://jsfiddle.net/7j3db/32/
jsFiddle：http: //jsfiddle.net/7j3db/32/
回答by Brilliand
You don't need to strip the image width and height attributes.
您不需要剥离图像的宽度和高度属性。
jsFiddle: http://jsfiddle.net/7j3db/
jsFiddle：http: //jsfiddle.net/7j3db/
Tested in Chrome, Firefox, Opera, IE9 and IE9 emulating IE7. Seems to work fine in all of them, with the exact CSS rule you mentioned.
在 Chrome、Firefox、Opera、IE9 和 IE9 模拟 IE7 中测试。使用您提到的确切 CSS 规则，似乎在所有这些中都可以正常工作。
EDIT: Tested with an image that could not be loaded: http://jsfiddle.net/7j3db/1/
编辑：使用无法加载的图像进行测试：http: //jsfiddle.net/7j3db/1/
This had the proper effect in Chrome and IE (even IE7), but not in Firefox or Opera. However, even in Firefox and Opera, the effect was better than if the width and height attributes were left out (because the width attribute still had an effect, even though the height attribute didn't).
这在 Chrome 和 IE（甚至 IE7）中具有正确的效果，但在 Firefox 或 Opera 中没有。但是，即使在 Firefox 和 Opera 中，效果也比省略 width 和 height 属性要好（因为 width 属性仍然有效果，即使 height 属性没有）。
Further testing with alt text (http://jsfiddle.net/7j3db/2/): Handled perfectly by IE7, but IE9 joins Opera, and IE8 does something really strange (the image height depends on the length of the alt text - the more alt text, the less space). Chrome seems to ignore the alt text entirely. Opera and FF show the alt text, but otherwise have essentially the same behavior as they did before. The width and height attributes do not appear to be responsible for any of these alt text woes, however (except in IE8, to some extent).
使用替代文本进一步测试 ( http://jsfiddle.net/7j3db/2/)：由 IE7 完美处理，但 IE9 加入了 Opera，而 IE8 做了一些非常奇怪的事情（图像高度取决于替代文本的长度 -替代文字越多，空间越小）。Chrome 似乎完全忽略了替代文本。Opera 和 FF 显示替代文本，但其他方面的行为与以前基本相同。然而，宽度和高度属性似乎不应对任何这些替代文本问题负责（在某种程度上，IE8 除外）。
回答by Balram Singh
You can achieve this by adding
您可以通过添加来实现这一点
html, body{
max-width:100%;
width:100%;
}
and also putting these properties on the parent div of the img tag.
并将这些属性放在 img 标签的父 div 上。
