画像にmax-widthを指定すると、IE8で縦に伸びて表示される

画像サイズを可変にする際、max-widthを指定して大きくなり過ぎないようにしていたところ、IE8で表示がおかしくなる現象に遭遇しました。

問題のソース

現象が発生したソース。

HTML

<div id="sample"><img src="./sample.png" alt="SAMPLE" /></div>

CSS

#sample {
	text-align: center;
}
#sample img {
	width: 100%;
	max-width: 647px;
	height: auto;
}

実際の表示サンプル

上が通常の表示、下がIE8での表示になります。

対応方法

画像ではなく親要素のdivに対してmax-widthを指定、画像はwidth: 100%;にして対応しました。

CSS

#sample {
	width: 100%;
	max-width: 647px;
	margin: 0 auto;
	text-align: center;
}
#sample img {
	width: 100%;
	height: auto;
}

実際の表示サンプル