CSSで簡単に画像サイズをスマートフォンに対応させる方法

PCの時は特に悩まなかったけど、スマホ対応させるようになってから、機種によっても画面サイズが異なるし、縦や横に傾けた時にも可変するので大変です。

画像サイズを固定値で制御してしまうと、スマホで見たときに画面からはみ出したり、逆にすごく小さかったりして困った事ありませんか？ありますよね。
僕は以下の方法で対応しています。

とりあえず、Retinaディスプレイ用に画像はPCで表示させる二倍のサイズで出力させておいて、imgタグ内にはPCで表示させるpxサイズを指定する。
以下の例では、画像サイズを400px X 400px のサイズで出力しておいて、半分のサイズをimgタグ内で指定しています。

<img src="sample.jpg" class="sample" width="200" height="200" alt="サンプル" />

そして、これをCSSで以下のように指定する。

/* --- Retinaディスプレイ対応 */
img {
  zoom: 0.5;
}

img.sample {
  max-width: 100%;
  height: auto;
  zoom: 1;
}

こうすることにより、スマホで縦にしても横にしても画面内にピッタリと収まるはずです。
ああ、もちろんこのCSSは、PCが読まないように、media="only screen and (max-device-width:667px)" とか使って、スマホ用で別に読み込ませてください。