カテゴリー:
レスポンシブ画像
閲覧数:655 配信日:2015-08-17 19:47
A-3方式.imgタグ(sizes属性min-widthプロパティ srcset属性w記述子)
幅デスクリプタ
幅に合わせた寸法での表示
→ ビューポートの幅とハードウェアの画面解像度に基づき、最も適切な画像リソースを選択して読込
・imgタグsizes属性min-widthプロパティ
・imgタグsrcset属性w記述子
sizes属性
・条件とそれに応じた画像表示を指定
・sizes属性では、メディアクエリが当てはまる最初の条件が適用されるため、複数記述する場合の指定順番はとても重要
具体例1
・ウィンドウサイズが 640px 以下なら ウィンドウサイズの半分(50vw)のサイズの画像を自動選択して読込
・それ以外の時は画面サイズに対して100%の画像を自動選択して読込
| ウィンドウサイズ | 読込画像 |
|---|---|
| 640px 未満 | img-320.jpg 読込 |
| 1280px 未満かそれ以上 | img-640.jpg 読込 |
<img src="img/img.jpg"
sizes="(min-width: 640px) 50vw, 100vw"
srcset="img/img-320.jpg 320w,
img/img-640.jpg 640w"
alt="画像の説明">