Question

我有两个图像，一个是1000 x 800像素（＆＃34;大＆＃34;），一个是200 x 200像素（＆＃34;小＆＃34;）。我想使用 srcset / 尺寸 / picturefill 在屏幕小于或等于500 CSS时显示小图片像素宽，否则大图像。

这是一个稻草人提案：http://jsfiddle.net/ghhjfo4z/1/embedded/result/

<img srcset="http://i.imgur.com/hw9O9Ia.jpg 1000w, http://i.imgur.com/BgLoqRx.jpg 500w">

这在我的1倍像素密度显示器上工作正常。但当我切换到我的2倍像素密度视网膜显示器时，突然只有当视口小于或等于250 CSS像素宽时才会显示小图像。

当视口小于或等于500px时，有没有办法让浏览器在我的2倍像素密度显示器上使用小图像？

基本上我想忽略设备的像素密度，并使用 srcset 和/或尺寸来仅根据视口的CSS像素宽度选择图像。

Answer 1

简而言之，这是不可能的。如果你想拥有更多控制权，你可以使用图片元素。

<picture>
    <source srcset="img-500w.jpg" media="(max-width: 650px)" />
    <img srcset="img-1000w.jpg" />
</picture>

还有一个有趣的lazySizes plugin for you, optimumx。标记看起来像这样：

<img
    data-srcset="http://placehold.it/300x150 300w,
        http://placehold.it/700x300 700w,
        http://placehold.it/1400x600 1400w,
        http://placehold.it/2800x1200 2800w"
     data-sizes="auto"
     data-optimumx="1.5"
     class="lazyload"
     src="http://placehold.it/300x150"
     alt="flexible image" />

将它设置为1.2或更高1.5而不仅仅是1是明智的。

对于其他performance vs. retina considerations，请查看此处。

Answer 2

刚刚完成：我发现以下解决方案适合我：

<img
    srcset="http://i.imgur.com/hw9O9Ia.jpg 1000w,
        http://i.imgur.com/BgLoqRx.jpg 500w"
    sizes="(-webkit-min-device-pixel-ratio: 2) 50vw,
        (min-resolution: 192dpi) 50vw,
        (min-resolution: 2dppx) 50vw,
        (-webkit-min-device-pixel-ratio: 3) 33.33vw,
        (min-resolution: 288dpi) 33.33vw,
        (min-resolution: 3dppx) 33.33vw" />

img srcset - 忽略像素密度

2 个答案: