【CSSで解決】IEで画像がはみ出た時の解決法

2カラムのレイアウトをIEで見てみたらはみ出でいる、変な隙間がある、指定した大きさより大きく表示されている……。
など、2カラムレイアウトにトラブルは付きものですね。
そこで今回は、<img>を思い通りに表示させるための下ごしらえ、チェックポイントをご紹介します。

  • 基本はこれでOK!全ての<img>へ適用するCSS
  • IEで画像が大きく出過ぎる/はみ出すとき

基本はこれでOK!全ての<img>へ適用するCSS

基本は下記のCSSを一番上に書いておくことで<img>関連の問題はほぼないはずです。しかし、2カラムレイアウトの場合は例外があります。

img {
    max-width: 100%; /*元の画像サイズを超えないように*/
    height: auto;/*横幅に合わせて縦幅を調整*/
    vertical-align: bottom; /*画像を下付にする*/
    display: block; /*ブラウザによってinline要素と認識されるのを防ぐ*/
}

IEで画像が大きく出過ぎる/はみ出す

こちらの問題のチェックポイントは2点。
①2カラムレイアウトのwidthの合計がmargin、paddingを含めて100%を超えてないか。
②それでもはみ出たら、<img>にwidth:100%;を当ててみる。
多くの場合はこれで解決すると思います。

figure {
width:50%;
}
figure img {
width:100%;
}