ウインドウ幅に合わせて拡大縮小する画像のCSS【レスポンシブWebデザイン】

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

解説

max-width:100%;

ウィンドウ幅に合わせて、画像幅が拡大・縮小されます。

height: auto;

max-widthだけを指定すると横幅だけが変化してしてしまい、縦横比が崩れ結果下の写真のように、画像がつぶれて表示されてしまいます。

ですので、height: auto; を指定し、高さを自動調整できるように設定しましょう。

注意！
max-widthプロパティは古いIEでは正しく機能しません。
機能させるためには別途「IE8対応」が必要になります。