カテゴリー:
レスポンシブ画像
閲覧数:1016 配信日:2015-08-17 19:46
A-2方式.imgタグ(sizes属性 srcset属性w記述子)
幅デスクリプタ
幅に合わせた寸法での表示
→ ビューポートの幅とハードウェアの画面解像度に基づき、最も適切な画像リソースを選択して読込
・imgタグsizes属性
・imgタグsrcset属性w記述子
sizes属性
・条件とそれに応じた画像表示を指定
具体例1
・ウィンドウサイズの半分(50vw)のサイズの画像を自動選択
具体例1
| ウィンドウサイズ | 読込画像 |
|---|---|
| 640px 未満 | img-320.jpg 読込 |
| 1280px 未満かそれ以上 | img-640.jpg 読込 |
<img src="img/img.jpg"
sizes="50vw"
srcset="img/img-320.jpg 320w,
img/img-640.jpg 640w"
alt="画像の説明">