画像の幅を 100% にすると、親要素いっぱいにストレッチされますが、元画像の解像度以上に拡大したくないときがあります。そんなときは、width と max-width を使い分けると良いです。
拡大もさせたいときは width
width: 100%;
拡大させたくないときは max-width
max-width: 100%;
サンプル
画像の原寸サイズはどちらも 600x400 になっています。ウィンドウサイズを変化させてみると分かりますが、max-width の場合は原寸サイズ以上に拡大されることはありません。
width: 100%

max-width: 100%

0 件のコメント