2016年11月28日 : してログ

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

拡大もさせたいときは width
width: 100%;
拡大させたくないときは max-width
max-width: 100%;

サンプル

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

width: 100%
max-width: 100%