高度:Internet Explorer 8及更低版本中的自动

Question

转向响应式设计,我使用%s作为图像,例如:

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

除了在Internet Explorer 8及更低版本中,这很有用.这是否height: auto属于CSS3的一部分,只有IE9才能支持？

最重要的部分......围绕这个问题的任何建议？到目前为止,我唯一能想到的就是给它一个最大高度.

谢谢

Answer 1

试试这个:

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