img srcset -忽略像素密度

Question

我有两个图像，一个是1000 x 800 px (“大”)，一个是200 x 200 px (“小”)。当屏幕小于或等于500个CSS像素宽时，我想使用srcset / sizes / 图片填充来显示小图像，否则显示大图像。

下面是一个稻草人的建议：http://jsfiddle.net/ghhjfo4z/1/embedded/result/

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

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

当视口小于或等于500 2x时，是否有任何方法使浏览器使用我的2x像素密度显示器上的小图像？

基本上，我想忽略设备的像素密度，并使用srcset和/或sizes只选择基于视口的CSS像素宽度的图像。

Answer 1

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

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

还有一个有趣的你的lazySizes插件，乐天。标记将如下所示：

<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。

对于其他性能与视网膜的考虑因素，请看这里。

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" />