web-dev-qa-db-ja.com

高さ：Internet Explorer 8以下では自動

レスポンシブデザインに向けて、画像に％sを使用しています。例：

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

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

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

ありがとう

imagecssresponsive-design
30
SparrwHawk

これを試して：

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を参照してください

57
ryanve