10

我有两张图片，一张是 1000 x 800 像素（“大”），一张是 200 x 200 像素（“小”）。当屏幕小于或等于 500 CSS 像素宽时，我想使用srcset / sizes / picturefill显示小图像，否则显示大图像。

这是一个稻草人的建议：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 像素时才会显示小图像。

当视口小于或等于 500px 时，有什么方法可以让浏览器在我的 2x 像素密度显示器上使用小图像？

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

4

2 回答 2

7

只是为了完成：我发现以下解决方案对我有用：

<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" />
于 2018-01-30T16:31:34.053 回答
6

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

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

还有一个有趣的lazySizes 插件适合您，optimizex。标记看起来像这样：

<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 是明智的。

有关其他性能与视网膜的考虑，请查看此处。

于 2014-11-26T13:15:30.837 回答