我有两个图像,一个是1000 x 800像素("大"),一个是200 x 200像素("小")。 我想使用 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像素宽度选择图像。
答案 0 :(得分:3)
简而言之,这是不可能的。如果你想拥有更多控制权,你可以使用图片元素。
<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,请查看此处。
答案 1 :(得分: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" />