max-widthとwidthによるサイズ設定

画面サイズの半分程度の大きさで画像を表示したいけど、高解像度端末で拡大表示になる（ぼける）のは避けたい。そんな時に便利なのが、cssのmax-width属性です。

max-widthは、「最大の表示幅」をcss単位で指定できます。たとえば

とすると「横幅は画面の半分、ただし400ピクセル（css単位）を超えそうなら400ピクセルとする。高さは、横幅に合わせて自動設定」という指定になります。widthがmax-widthを超えないよう調整されるわけです。

iPhone向けWebサイトでは、viewport指定を入れて横320ピクセルで作成することが多いので、この指定を入れると横160ピクセル相当の大きさで表示されることになります。一方、フルHD端末では横1080ピクセルになるので半分は540ピクセルですが、max-widthに400ピクセルが指定されているため横幅は400ピクセルとして表示されるわけです。

スマートフォンのWebブラウザでは、vireport指定や端末画面解像度など様々な要素でcssピクセル数が大きく変わってきます。レイアウト上、ピクセル数ではなく相対的な「割合」でサイズ設定を行いたくなる場面も多いことでしょう。ただ、画像など無制限に拡大したくない要素もあるはず。そんな時は、widthに加えてmax-widthを指定してみましょう。

なお、max-widthに指定する値はcss単位ですので、device-pixel-ratioの影響を受ける点に注意が必要です。viewportをデフォルト設定したiPhone4などではdevice-pixel-ratioが2となるため、max-widthに160pxを指定すると物理的な解像度は最大320ピクセルになります。

max-widthの設定例