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

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

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

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

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

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

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

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

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

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

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

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP