imageset
は、HTMLのsrcset
属性に相当するCSSです。しかし、current specはw
とh
サイズ単位ではなく、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-width
とmax-resolution
のメディアクエリを指定することによってそれをやり始めましたが、すぐに混乱しました。より良い方法が必要です。 JS polyfillを利用できる場合はそれを使用します。
(https://github.com/scottjehl/picturefill):
あなたはトピックのこの偉大な記事をお読みください? –
Picturefillは、HTMLの 'srcset'と'