2016-09-27 11 views
1

imagesetは、HTMLのsrcset属性に相当するCSSです。しかし、current specwhサイズ単位ではなく、xピクセル密度単位のみをサポートしています。例えばCSSでsrcsetをエミュレートする

<img srcset="high.jpg 2000w, medium.jpg 1200w, low.jpg 800w"> 

私は400のピクセル幅のクローム最初の負荷low.jpgに私のブラウザのウィンドウのサイズを変更する場合。ウィンドウを広くすると、最初にmedium.jpg、次にhigh.jpgが読み込まれます。私の網膜のMacbookは私の古いWindowsのラップトップに比べて半分のウィンドウサイズで高解像度の画像を読み込むように、スイッチのポイントは私のディスプレイのピクセル密度に依存しています。

CSSの背景イメージに対してこの動作を再現するにはどうすればよいですか?私はmin-widthmax-resolutionのメディアクエリを指定することによってそれをやり始めましたが、すぐに混乱しました。より良い方法が必要です。 JS polyfillを利用できる場合はそれを使用します。

+1

(https://github.com/scottjehl/picturefill):

あなたはトピックのこの偉大な記事をお読みください? –

+0

Picturefillは、HTMLの 'srcset'と' 'のpolyfillですが、CSSでは何もしません。 –

答えて

0

CSSメディアクエリ:pixel ratio

それともPicturefill

+0

Picturefillは、HTMLの 'srcset'と' 'のpolyfillですが、CSSでは何もしません。 –

関連する問題