IE8で画像のheightがautoで表示されない時の対処方法

自由が丘で働くWeb屋のブログ

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;
}
 
カテゴリー:Webシステム開発
タグ:,
2012年12月25日 12時32分
 

関連記事

 

コメントを書く

This blog is kept spam free by WP-SpamFree.

(C) 自由が丘で働くWeb屋のブログ
Get Adobe Flash player