現時点の採用案

案3.picture を使用したレスポンシブ画像のアート ディレクション（Art Direction-based Selection）

VWはCSSフレームワークで対応
・最低限実装したい内容は、この方式で対応可能

---

整理中

JavaScript
・設定されていないと取得できない？

document.querySelectorAll('.thumbnail')[0].style.width;

---

jQuery
Chrome表示205

$(".thumbnail").width(); //195

---

IE未対応
デモを試すも、IE未対応
・最小widthで指定した画像を、(どのwidthでも)常に表示

---

現時点の結論


ブラウザがビジー状態だったためおかしかっただけ？
・要再調査
・なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
Picturefill 2.xデモ①： 幅に合わせた寸法での表示
・IE正常
・Chrome下記不具合
・最大widthで指定した画像を、(どのwidthでも)常に表示

sizes属性
・IE正常
・Chrome下記不具合
・最大widthで指定した画像を、(どのwidthでも)常に表示

Retina対応（Device-pixel-ratio-based Selection）
・IE下記不具合
・最小widthで指定した画像を、(どのwidthでも)常に表示
・Chrome下記不具合
・最大widthで指定した画像を、(どのwidthでも)常に表示

---

Next
勘違いしていたかも
・viewportは、50vwなら50%幅の画像を読み込むのではなくて、50%で表示するってこと？

・sizes="80vw"だから、800×80%で640.jpg を読み込みのではなくて、単に「lighthouse-800.jpg 800w,」がないから、未満の640.jpgを読み込むってこと？

<img src="lighthouse-160.jpg" alt="灯台"

     sizes="80vw"

     srcset="lighthouse-160.jpg 160w, 

             lighthouse-320.jpg 320w,        

             lighthouse-640.jpg 640w,

             lighthouse-1280.jpg 1280w">

レスポンシブイメージのネイティブサポート - HTML5 Rocks

確認すること
・320px画面1列表示。1列@320
・800px画面4列表示。1列@200
・この場合の画像選択読込をviewportで処理可能？
・出来ないんじゃないの？