カテゴリー:
レスポンシブ画像
閲覧数:731 配信日:2015-08-20 22:39
案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要素やsrcset属性を使ったレスポンシブ・イメージはまだ使わないのが得策のようです。
残念ながら、picture要素やsrcset属性を使ったレスポンシブ・イメージはまだ使わないのが得策のようです。
ブラウザがビジー状態だったためおかしかっただけ？
・要再調査
・なんでもかんでも<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を読み込むってこと？
左のビューポート幅は約 800px。デバイスピクセル比が 2x でない限りブラウザは lighthouse-640.jpg を読み込み、2x である場合は lighthouse-1280.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で処理可能？
・出来ないんじゃないの？