スマホの画面サイズに合わせて画像・写真を縮小・拡大表示するレスポンシブデザイン

更新：2017-05-12

スマホの画面サイズに合わせて画像や写真を縮小したり、拡大して表示するタグとCSS。

スマホの画面サイズ

2017年現在、スマホの画面サイズは横（短辺）が 720～1080px あるが、 viewport で width=device-width を指定してサイトを表示した場合、横の画面サイズは 320px くらいが最小で、400px 前後のサイズが多い。

例えば写真や画像を width:320px で固定すると、横幅 400px 前後の画面では画像が少し小さく見えるが、できればスマホの画面に合わせて大きく表示したい。ここでは HTML や CSS を使って、画面の横幅にフィットして表示する方法について記す。

max-width と max-height

画像をレスポンシブにする方法はいくつかあるが、max-width を使うのが一番簡単だと思われる。例えば、640p×480px の画像があったとすると以下のように記述する。

<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
</head>

<img src="example.jpg" width="640" height="480"
   style="width:100%;max-width:640px;height:auto;max-height:480px;" alt="写真" />

max-width は幅の最大値、max-height は高さの最大値で、これらを指定するとその値を超えないようになる。上の例では、width:100% により表示領域の幅いっぱいに表示するが、max-width:640px により 640px より大きくなることはない。つまり表示領域が 640px 未満では 100% で表示され、表示領域が 640px 以上になると 640px 固定で表示される。このタグを書いたページをパソコンのブラウザで表示し、ブラウザのウィンドウ幅を動かしてみると動作が分かる。

width:95%;max-width:640px; と書いて右側に少し余白を作っても良い。 width="640" height="480" はCSSが優先されるので指定しなくても良い。

画像の高さは height:auto としておくと、表示する width に合わせて自動的に変動する。 JPEG、PNG のように元の縦横サイズが存在するものは自動的にアスペクト比を保ってくれるが、そうでないものは効果がない。

この例では max-height を書いているが、通常は書かなくても良い。ただ、例えば 10p×10px を実際の比率とは異なる 100p×10px で表示させている場合、その比率を保ったまま拡縮したい場合は max-height を指定すると良い。

max-width は max-width - CSS | MDN に説明があり、古くから存在していて、たいていのブラウザで使える。今まで使う機会がなかったが、モバイルファースト時代には便利なプロパティである。

srcset と sizes

img 要素には HTML5 から追加された srcset 属性と sizes 属性がある。詳しくは img - HTML | MDN に説明がある。例えば、640p×480px の画像について以下のように記述する。

<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
</head>

<img src="example_640.png" srcset="example_640.png 640w"
   sizes="(min-width: 640px) 640px, 100vw" alt="画像" />

この例は max-width を使用した最初の例と同じような動作をする。ただ、Firefox と Chrome では動作するが、Edge では動作しない。 srcset の画像の候補を2個にすると Edge でも動作する。

また、Internet Explorer（IE）は最新版の IE11 でもこれらの属性をサポートしていないため動作しない。 IE は単に src に指定した画像が表示される。まあ、スマホなどで画面の幅に合わせて画像を表示することが目的なので、iOS＋Safari、Android＋Chrome で動作するば良いだろう。ただし、iOS＋Safari では画面を横向きにした際に画像が画面の幅に合わせて拡大しない。

動作確認した OS やブラウザは2017年現在最新のもので、今後動作が変わってくる可能性もある。 srcset と sizes は画素密度に合わせて画像の候補を用意するには有用かもしれないが、単に画像を拡縮するだけなら width と max-width を併せて使うのが簡単で、且つ多くの環境で動作する。

カテゴリ