30

转向响应式设计，我将 %s 用于图像，例如：

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

这很好用，但在 Internet Explorer 8 及更低版本中除外。这是因为height: auto它是 CSS3 的一部分，只有 IE9 以后才支持？

最重要的部分......关于解决这个问题的任何建议？到目前为止，我唯一能想到的就是给它一个最大高度。

谢谢

4

1 回答 1

57

尝试这个：

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

于 2012-01-12T06:51:02.733 回答