30

レスポンシブ デザインに移行して、画像に %s を使用しています。

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

Internet Explorer 8 以下を除いて、これはうまく機能します。height: autoこれは、IE9 以降でのみサポートされている CSS3 の一部であるためですか?

そして最も重要な部分は...この問題を回避する方法について何か提案はありますか? これまでに考えられる唯一のことは、最大高さを与えることです。

ありがとう

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 に答える