0

以下のコードで、解像度が約 400px のときにブラウザーが大きな画像と小さな画像を読み込んでいる理由を理解しようとしています。解像度が小さい場合は、小さい画像をロードするだけですよね? Retina ディスプレイでも、中程度の画像をロードする必要があります。

ここ数時間、私はこれについて勉強しようと試みてきました。

<img    
    srcset="https://s18.postimg.org/t9xyf7mix/small.jpg  320w,
            https://s18.postimg.org/w5b1m2qix/medium.jpg 640w,
            https://s18.postimg.org/ues0kl8zt/large.jpg  1024w" 

    sizes= "(min-width: 1024px) 50vw,
            (min-width:  640px) 50vw,
            (min-width:  320px) 50vw"

    src="https://s18.postimg.org/t9xyf7mix/small.jpg"
    alt="Test image behavior" 
/>

JSFiddle へのリンク: https://jsfiddle.net/italoborges/v8yftgj2/2/

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

ありがとう。

4

1 に答える 1

1

この意思決定の背後にある数学の素晴らしい説明とデモンストレーションは次のとおりです:
https://css-tricks.com/responsive-images-youre-just-ching-resolutions-use-srcset/

さらに、ここでは、高度な分析を使用して特定の画像に対して最適化されたブレークポイントのセットを抽出する、優れた自動レスポンシブ ブレークポイント ジェネレーターを見つけることができます:
http://www.responsivebreakpoints.com/

于 2016-04-03T11:32:32.113 に答える