CSS 高度：Internet Explorer 8 及更低版本中的自动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8610077/
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
Height: Auto in Internet Explorer 8 and below
提问by SparrwHawk
Moving towards responsive design, I'm using %s for images, e.g.:
转向响应式设计，我将 %s 用于图像，例如：
#example img {
width: 100%;
height: auto;
max-width: 690px; // Width of the image uploaded.
}
This works great, except in Internet Explorer 8 and below. Is this due to height: autobeing part of CSS3, which is only supported by IE9 onwards?
这很好用，除了在 Internet Explorer 8 及更低版本中。这是因为height: auto它是 CSS3 的一部分，它只被 IE9 支持吗？
And the most important part... any suggestions on a way around this problem? The only thing I can think of so far is to give it a max-height.
最重要的部分......关于解决这个问题的任何建议？到目前为止，我唯一能想到的就是给它一个最大高度。
Thanks
谢谢
回答by ryanve
Try this:
尝试这个：
img {
width: inherit; /* Make images fill their parent's space. Solves IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto; /* Add !important if needed. */
}
OR:
或者：
img { max-width:100%; height: auto; } /* Enough everywhere except IE8. */
@media ##代码##screen {img { width: auto }} /* Prevent height distortion in IE8. */
Both solutions work. The difference is that width:inheritmakes images fill their parent's space whereas width:automaxes them at their actual dimensions. See fit.css
两种解决方案都有效。不同之处在于width:inherit使图像填充其父级的空间，而width:auto在其实际尺寸上最大化它们。参见fit.css
