widthとmaxーwidthの違い

css_width_or_max-width.md

はじめに

<li>タグの中に画像を配置します。<li>はwidthを50%にして、ブラウザの大きさによって幅が変わるようにします。

画像はサイズの異なる3つの画像を、それぞれ<li>の中に配置し、<img>にwidthやmax-widthを利用した場合にどのような挙動をするのか比較します。

imgタグにwidthもmax-widthも適用しないケース

画像サイズはオリジナルの画像サイズであるため、<li>タグの横幅より大きな画像は<li>をはみ出して表示されます。

サンプル

imgタグにwidthを適用するケース

img {
  width: 100%;
  height: auto;
}

画像が親要素である<li>タグのサイズに合わせて表示されるようになります。下記の特徴があります。

• 画像は親要素のサイズに一致する(はみださない)
• 画像のオリジナルサイズを超えても、親要素のサイズに合わせる
  • つまり、親要素サイズ > 画像オリジナルサイズの状態になっても、画像サイズは親要素のサイズに合わせて拡大し続けます

サンプル

imgタグにmax-widthを適用するケース

img {
  max-width: 100%;
  height: auto;
}

画像が親要素である<li>タグのサイズに合わせて表示されるようになります。下記の特徴があります。

• 画像は親要素のサイズにあわせる(はみださない)
• 画像のオリジナルサイズを超えない範囲まで、親要素のサイズに合わせる

サンプル