img srcset - 忽略像素密度

Question

我有两张图片，一张是1000x800像素（“大”），另一张是200x200像素（“小”）。

我想使用 srcset / sizes / 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倍像素密度的Retina显示屏时，只有当视口宽度小于或等于250个CSS像素时，才会显示小图像。

是否有办法让浏览器在视口宽度小于或等于500像素时使用我2倍像素密度显示屏上的小图像？

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

- mark

---

好问题！我不明白为什么这个问题没有被广泛讨论。srcset 的一个主要优点是减少带宽，但大多数示例中，我将超过一千像素宽的图像推送到横向显示的 iPhone 上。 <picture> 似乎是解决方案。 - Steffen Wenzel

Answer 1

仅供参考：我找到了以下解决方案，对我很有效：

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

- René Schubert

---

是的，在dppx中结合min/max-resolution，它与"x"是一样的，完美地运作。 - undefined

Answer 2

简而言之，这是不可能的。如果您想要更多的控制，您可以使用图片元素（picture element）。

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

还有一个有趣的lazySizes插件，名为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，将其设置为1.2或更好的1.5是明智的选择。

对于其他性能与视网膜考虑，请查看此处。

- alexander farkas

---

最后一个链接已损坏。 - SAM