IE8で画像のheightがautoで表示されない時の対処方法
IE8で画像のheightがautoで表示されない時の対処方法
縦横比率が決まっていない画像をシステムでランダムに表示する際など、横幅(width)をピクセルやパーセントで固定して縦幅(height)を『auto』にすると便利ですが、InternetExplorer8では高さが0と認識されてしまい、潰れた画像になってしまいます。
IE8で画像のheightがautoで表示されない時の対処方法は以下から。
IE8で画像のheightがautoで表示されない時の対処方法
下記の様な記述ではインターネットエクスプローラー8では画像が表示されません。
img {
width: 100%;
height: auto;
}
下記の様に『width』属性を『inherit』に変え、新たに『max-width』属性を『100%』と指定する事で、IE8でも問題無く表示されます。
img {
width: inherit;
max-width: 100%;
height: auto;
}
パーセント値ではなくピクセル数で指定することも可能です。
img {
width: inherit;
max-width: 240px;
height: auto;
}
