高度：在Internet Explorer 8及以下版本中自动 [英] Height: Auto in Internet Explorer 8 and below

问题描述

转向响应式设计，我对图片使用％s，例如：

Moving towards responsive design, I'm using %s for images, e.g.:

#example img {
    width: 100%;
    height: auto;
    max-width: 690px; // Width of the image uploaded.
}

这项工作很好，除了Internet Explorer 8及以下版本。这是因为 height：auto 是CSS3的一部分，只有IE9才支持？

This works great, except in Internet Explorer 8 and below. Is this due to height: auto being part of CSS3, which is only supported by IE9 onwards?

最重要的部分...关于解决这个问题的任何建议？

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.

感谢

推荐答案

试试这个：

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. */
}

或：

img { max-width:100%; height: auto; } /* Enough everywhere except IE8. */
@media \0screen {img { width: auto }} /* Prevent height distortion in IE8. */

两种解决方案都可以工作。区别是 width：inherit 使图像填充他们的父级空间，而 width：auto 将它们的实际尺寸最大化。请参阅 fit.css

Both solutions work. The difference is that width:inherit makes images fill their parent's space whereas width:auto maxes them at their actual dimensions. See fit.css

这篇关于高度：在Internet Explorer 8及以下版本中自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！