画像のレスポンシブ対応でsizes属性を使う際に注意すること

2017年2月26日カテゴリー : CSS コメント : 0

ごく稀になんですが、画像を常にビューポートの幅80％で表示するには sizes 属性を使って次のように記述すればよいという説明を見かけることがあります。

<img src="test_160.jpg"
     alt="ローストビーフ"
     sizes="80vw"
     srcset="test_160.jpg 160w,
             test_320.jpg 320w,
             test_640.jpg 640w,
             test_1280.jpg 1280w">

<img src="test_160.jpg"

alt="ローストビーフ"

sizes="80vw"

srcset="test_160.jpg 160w,

test_320.jpg 320w,

test_640.jpg 640w,

test_1280.jpg 1280w">

これは明確な間違いです。

sizes 属性で「vw」という単位を使って条件を指定しています。80vwであればビューポートの幅の80％を基準に srcset のなかから画像を選ぶという意味になります。例えば680pxの画面だった場合、680Ｘ0.8＝544となるので、対応するのは test_640.jpg になるという具合です。どのような基準で画像を振り分けるのかを指定するものであって、選択後の画像に対して縮小を指定するものではありません。

実際に画像を常にビューポートの幅80％で表示したいのであれば、スタイルシートの img タグに対して次のように指定すればよいです。

img {
    width: 80%;
    height: auto;         // 画像の縦横比を維持するために必要
}

img {

width: 80%;

height: auto; // 画像の縦横比を維持するために必要

}

デバイスの画面サイズに合わせて画像の表示領域も変化させるフルードイメージの場合、width は100％で指定します。今回は80％に変更しただけですね。

中央揃えや画像下の余白まで考慮するなら、次のように指定するかと思います。

img {
    width: 80%;
    height: auto;         // 画像の縦横比を維持
    display: block;       // マージンによる中央揃えに必要
    margin: 0 auto;       // 80％の画像を中央揃え
    margin-bottom: 20px   // margin: 0 auto;より後に指定しないと効果がないので注意
}

img {

width: 80%;

height: auto; // 画像の縦横比を維持

display: block; // マージンによる中央揃えに必要

margin: 0 auto; // 80％の画像を中央揃え

margin-bottom: 20px // margin: 0 auto;より後に指定しないと効果がないので注意

}

80％で表示されてしまう場合もある

いろいろ試していて気付づいたのですが、width を max-width に変更すると確かに80％で表示されてしまうようです。

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

img {

max-width: 100%;

height: auto;

display: block;

margin: 0 auto;

margin-bottom: 20px;

}

一般的にレスポンシブ対応で画像をフルードイメージにするには、width・max-width のどちらを使っても挙動は同じです。

[CSS]要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか | コリス

「フルードイメージ」などで検索すると、上位に表示されるページのソースコードも max-width を使ったものが主流です。また、今回の動作検証は Google Chrome と Firefox のモバイル環境テストツールにおいてのものであり、実機でどのように動作するのかは確認していません。ただ、sizes 属性により画像の振り分けを行うことを考えた場合、width を使っておくほうが間違いないように思います。