[CSS] 画像サイズをレスポンシブにしたいが拡大させたくないとき : してログ

CSS RWD 2016年11月28日

画像の幅を 100% にすると、親要素いっぱいにストレッチされますが、元画像の解像度以上に拡大したくないときがあります。そんなときは、width と max-width を使い分けると良いです。

width: 100%;

max-width: 100%;

画像の原寸サイズはどちらも 600x400 になっています。ウィンドウサイズを変化させてみると分かりますが、max-width の場合は原寸サイズ以上に拡大されることはありません。