0

現在、自分のサイトでよりレスポンシブな画像を作成しようとしています。いくつかの調査の後、私はsrcsetとsizes属性を見つけました。

ここでの私の目標は次のとおりです。

  • 画面サイズが 600px 以上または 300px 以下の場合、250x250 の画像を配信したい
  • これら2つの値の間にある場合、350x350の画像を提供したい
  • また、ピクセル比率が高い画面には、より解像度の高い画像が必要です

これが私が思いついたものです。しかし、それは私のようには機能していません。小さな 250x250 は常に配信されています。

<img src="https://placehold.it/250"
  srcset="https://placehold.it/700 700w, https://placehold.it/500 500w, https://placehold.it/350 350w, https://placehold.it/250 250w"
   sizes="((max-width: 600px) and (min-width: 300px) and (min-resolution: 2)) 350px, (min-resolution: 2) 250px, ((max-width: 600px) and (min-width: 300px)) 350px, 250px" />

追加の質問が 1 つあります
。私のテストでは、別の画像を提供するためにウィンドウのサイズを変更すると、ブラウザーが新しい画像を読み込まないことがわかりました。それは可能ですか？

4

1 に答える 1

0

Ok。sizes綿密な調査の結果、 - 属性を正しく理解していないことがわかりました。

以下は、私が望むものを達成する方法です:

<img src="https://placehold.it/250"
  srcset="https://placehold.it/700 700w, https://placehold.it/500 500w, https://placehold.it/350 350w, https://placehold.it/250 250w"
   sizes="(max-width: 600px) calc(100vw - 50px), 250px" />
于 2015-07-24T18:38:03.537 に答える