問題タブ [srcset]

ヘッダー画像に対応するレスポンシブ画像を取得しようとしています。

これは私がこれまでに持っていたもので、ある程度は機能しますが、960px を超えると画像が大きくなり続けるため、960px に達したら停止したいと考えています。

私は何を間違っていますか？

今朝、srcset とサイズのマークアップ、および特定のブレーク ポイントで画像がどのように選択されるかの背後にある数学を理解しようとしている間に、単純なコードペンをフォークして修正しました。これがペンです：http://codepen.io/patrickwc/pen/Ijuwq

ここにコピー：

html:

CSS:

62.5emブレークポイントまでは理にかなっています。これは1000pxです。画像が画面サイズの 4 分の 1 を占めるようsizesに属性で指定したことを考えると、600 x 600 が最初に読み込まれるのはなぜですか? (min-width: 62.5em) 25vw1000 / 4 = 250 なので、320 度の画像で問題ありません。私は、picturefill についてよく読み、Eric Portis と Chris Coyier によるこのテーマに関するすばらしい記事を読みました。何が間違っているのかわかりませんか、それとも単なる奇妙なバグですか?

w 構文をサポートするブラウザーに応答性の高い画像リソースを提供しながら、iOS8 クライアントに高 dpi 画像を提供する方法を見つけようとしています。W3C 標準によれば、1 つの srcset 属性に両方の構文を混在させることができるはずです。

(出典: http://drafts.htmlwg.org/srcset/w3c-srcset/ )

ただし、Chrome 38 (OS X、高 dpi なし) でその例を実行すると、他の場合に w 構文をサポートするブラウザーは、ビューポートのサイズに関係なく、常に最大の画像 (banner-HD.jpeg) を読み込みます。追加すると

Chrome はそのイメージを使用しますが、100w のイメージは無視します。

私の場合、イメージの小さいバージョンと、両方の 2x リソースを指定したいと思います。

これは、 w 構文をサポートしていないため、 medium@2x.png を選択する 2x iOS8 デバイスで動作するようです。ただし、Chrome はまだ気にしていないようで、ビューポートのサイズに関係なく medium.png をロードします。

ここで何か間違ったことをしていますか、それとも Chrome の srcset の実装における既知の問題ですか?

1 つは 1000 x 800 ピクセル (「大」) で、もう 1 つは 200 x 200 ピクセル (「小」) です。srcset / sizes / picturefillを使用して、画面の幅が 500 CSS ピクセル以下の場合は小さな画像を表示し、それ以外の場合は大きな画像を表示したいと考えています。

ここにストローマンの提案があります: http://jsfiddle.net/ghhjfo4z/1/embedded/result/

これは、私の 1x ピクセル密度ディスプレイでは問題なく動作します。しかし、2x ピクセル密度の Retina ディスプレイに切り替えると、突然、ビューポートの幅が 250 CSS ピクセル以下の場合にのみ小さな画像が表示されます。

ビューポートが 500px 以下の場合に、2 倍のピクセル密度のディスプレイでブラウザーに小さな画像を使用させる方法はありますか?

基本的に、デバイスのピクセル密度を無視し、srcsetやサイズを使用して、ビューポートの CSS ピクセル幅に基づいて画像のみを選択したいと考えています。