CSS でイメージをデバイスの幅に合わせて表示する

スマートフォンやタブレットの普及に伴い、パソコン、スマートフォン、タブレットの各種デバイスにあわせて表示できるようにしたいという要望が多くなった。回線速度の違いまで考慮するならば、デバイスごとにページを用意するほうがよいが、SEO 的には単一の HTML で描画する方がよい。そこで、レスポンシブデザインの登場となるわけだが、イメージをデバイスの幅に合わせて表示する際にはまったので、メモとして残しておくことにした。

デバイスに合わせてイメージを出力する方法

イメージのサイズに合わせて表示するのであれば、img タグの width と height アトリビュートを利用して、イメージの幅と高さを数値で指定すればよい。

<img src="sample.jpg" width="640" height="320"/>

しかし、デバイスの幅が640px 以下の場合、ページ全体を表示できずに横スクロールしてしまう。ページを綺麗に表示するために、イメージをデバイスの幅に合わせてサイズを変更して表示する必要が出てくる。

CSS の width 指定でイメージを調整する

最初は width を利用してみる。レスポンシブデザインでおなじみのメディアクエリーを使えば、デバイスの幅ごとにイメージの幅を変更できる。「@media screen and (min-width: 641px)」は640px 以上のデバイスに対して適用される CSS、「@media screen and (max-width: 640px)」は640px 以下のデバイスに対して適用される。一般的に前者は PC 用、後者はスマートフォン用の定義を行う。

@media screen and (min-width: 641px) {
	img {
		width: 640px;
		height: 320px;
	}
}
@media screen and (max-width: 640px) {
	img {
		width: 320px;
		height: 160px;
	}
}

上記の定義で、ブラウザの幅が640px 以上であればイメージは640px で表示され、ブラウザの幅が640px 以下であれば320px で表示される。パーセンテージで指定すれば、表示する領域の幅に合わせてイメージのサイズが変わるようにできるが、イメージを拡大すると画像が荒くなってしまう。

レスポンシブデザインを採用する場合、width の代わりに max-width を利用する方が便利だ。width と max-width の違いは以下の通り。

width
イメージのサイズに関係なく、指定したサイズで表示。たとえば、幅640px のイメージに対して 1280px を指定すると、元の画像を拡大して表示する。

max-width
最大幅は、イメージのサイズまでとなるため、画像が拡大されることはない。たとえば、幅640px のイメージに対して 1280px を指定しても640px で表示する。

CSS の max-width 指定でイメージを調整する

max-width を利用する場合、高さを自動的に決定させるために height には auto を指定する。max-width にピクセルで数値を指定する場合と、パーセントを指定する場合を見ていく。

@media screen and (min-width: 641px) {
	img {
		max-width: 640px;
		height: auto;
	}
}
@media screen and (max-width: 640px) {
	img {
		max-width: 320px;
		height: auto;
	}
}

max-width にピクセルを数値で指定した場合、表示幅がイメージの幅を超えないこと以外、width と大きな違いはない(サンプルを参照)。各種デバイスに柔軟に対応するには、パーセント指定を使う。パーセント指定する場合の注意事項は、img タグの親のエレメントの幅が基準になるということだ。たとえば、

<div>
	<img/>
</div>

という構造になっている場合、div の幅が基準になる。
サンプルでブラウザを小さくしていくと分かるが、パーセント指定の場合、表示領域が狭くなると自動的に表示するイメージを縮小してくれる。また、デバイスごとにレイアウトが違うのであればメディアクエリーで分岐する必要があるが、表示方法が同じであれば、パーセント指定の場合はメディアクエリーが不要になるためシンプルな CSS にできる。

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

サンプルはこちら

その他の方法

説明した方法でレイアウトは維持できるが、速度面では不利になる。320×240の画像として表示するのであれば、320×240の画像をダウンロードするのが最適で、倍のサイズの画像をダウンロードするのは遅くなる原因だ。画像のファイルサイズまで最適化したいのであれば、イメージを CSS のバックグラウンドで指定してメディアクエリーで読み込む画像を変更する、サーバー側で出力するイメージを調整するなどが考えられる。実験を行ったら、またレポートしたい。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.