srcsetとサイズのImgがイメージをロードしていません

Question

1、2、3、または4のカラムを使用するブレークポイントを持つイメージのグリッドからなるページを最適化しようとしています。

HTMLは次のようになります。

<img srcset=" image-300x200.jpg 300w, image-original.jpg 600w" sizes=" (min-width: 1px) calc(100vw * (0.94 * 1.000) * 1.00), (min-width: 480px) calc(100vw * (0.94 * 0.905) * 0.50), (min-width: 768px) calc(100vw * (0.94 * 0.850) * 0.33), (min-width: 981px) calc(100vw * (0.94 * 0.835) * 0.25), 280px" alt="E-Books customer service for Dutch Libraries" width="400" height="284">

CALC（）関数は、少し複雑に見えるかもしれませんが、私は、様々なビューポートの幅でそれらをテストして、ブラウザで画像のサイズを確認しました数学はチェックアウトします。

[viewport width] - [94% container width] - [column gutters]/[nr of columns]

しかし、私は、Chromeを（ほとんど、イェーイ一貫性のために）常に画面上のIMGの大きさが十分であっても、大きな画像を選択してみてください何でも：

完全性については

、ここではそれが何をするかです300px未満。私は、開発者ツール>インスペクタ>プロパティ> img> currentsrcでこれをチェックしましたthis answer

誰か助けてもらえますか？

Answer 1

私はそれを理解したと思います。メディアのクエリが期待通りに機能しないようです。

sizes=" (min-width: 1px) ... (min-width: 480px) ... (min-width: 768px) ... "

1時に画面のスクリーン> 1pxの広い

ライン＃2が真であるとき

• ライン＃1が真であることを前提としています：これらのルールはと例えば

  、 > 480px、オーバーライドライン＃1

• ライン＃3は、スクリーン> 768px、ライン＃1および＃2オーバーライドの場合にtrue

これは少なくとも実際には動作しません。私は、ブラウザは真に評価され、それを1日と呼ぶルールを探していると思う。

だから、ちょうど行く：

• ライン＃1を本当です！完了！ルールを適用する！簡単！
  ：私は私のルールを見て、心の中でこのロジックで結果とき、それは突然私が最初の行に使用CALC（）関数であるため、ブラウザが最大の画像を使用して主張しているという意味をなさ

calc(100vw * (0.94 * 1.0) * 1.0) - 複雑な書き込み方法windowWidth * 0.94です。

言い換えれば、ブラウザは、イメージが常にウィンドウの幅の94％であるとみなし、ブレークポイントを考慮した他の計算は適用しません。

とにかく、これに上記の規則を変更する：

sizes=" (min-width: 1px) and (max-width: 479px) ... (min-width: 480px) and (max-width: 767px) ... (min-width: 768px) and (max-width: 980px) ... "

は、ルールが唯一の特定の時点までに適用されることを確認します。次の行が真と評価されるたびに、他の行は評価されません。

だから、これは私が最後に一緒に行ったものです： Image srcset example (working)

注：

<img src="image-fallback.jpg" srcset=" image-300x200.jpg 300w, image-480x320.jpg 480w, image-600x400.jpg 600w, image-960x640.jpg 960w, image-1200x800.jpg 1200w" sizes=" (min-width: 1px) and (max-width: 479px) calc( 100vw * (0.94 * 1.000) * 1.00), (min-width: 480px) and (max-width: 767px) calc( 100vw * (0.94 * 0.905) * 0.50), (min-width: 768px) and (max-width: 980px) calc( 100vw * (0.94 * 0.850) * 0.33), (min-width: 981px) and (max-width: 1088px) calc( 100vw * (0.94 * 0.835) * 0.25), (min-width: 1089px) calc(1089px * (0.94 * 0.835) * 0.25), 280px" />

そして、ここでは、上記の実施例のブラウザが、より大きな画像をロードした後、より小さなものをロードすることには消極的です。それは、「強制的に更新する」ボタンのためのものです。

注2：デバッグでは、オリジナルの質問と比べてソースイメージを追加しました。 2つのサイズでシンプルにする方が簡単だと思っていましたが、束を入れていないとこれを決して考えなかったと思います。私は2枚の画像しか持っていなかったので、いつも最大のものを選んだと思った。それは本当ではありません、私は期待した画像を選んだことはありません）