srcset 和视口宽度

【问题标题】：srcset and viewport widthsrcset 和视口宽度
【发布时间】：2015-06-03 11:55:37
【问题描述】：

我有 2 张图片：一张桌面版，一张移动版。当视口宽度调整到 480 像素以下时，我希望桌面图像被移动图像替换，就像下面的带有 background-image 属性的 CSS 一样：

.logo { background-image: url(http://placehold.it/400x200&amp;text=desktop); }
media screen and (max-width: 480px) {
    .logo { background-image: url(http://placehold.it/300x150&amp;text=mobile); }
}

我认为我可以使用 srcset HTML 属性来实现这一点：

<img src="http://placehold.it/400x200&amp;text=desktop" alt="" srcset="http://placehold.it/300x150&amp;text=mobile 480w">

但它不起作用，浏览器一直显示移动图像并在视口调整大小时重新缩放它，但我希望 2 个图像保持各自的原始大小。

是否可以使用 srcset 实现此行为？

【问题讨论】：

标签： html responsive-design srcset

【解决方案1】：

听起来您想做“艺术指导”，即图像的不同不仅仅是较大图像的较小缩小版本。如果是这样，您需要使用picture 元素。

<picture>
 <source srcset="http://placehold.it/300x150&amp;text=mobile"
         media="(max-width: 480px)">
 <img src="http://placehold.it/400x200&amp;text=desktop" alt="...">
</picture>

但是，如果您的小图像实际上是大图像的缩小版本，那么您可以使用srcset，但您无法控制选择哪个图像。由浏览器根据屏幕密度、网络状况、用户偏好、浏览器缓存等选择最佳的。

<img src="http://placehold.it/400x200&amp;text=desktop"
     srcset="http://placehold.it/400x200&amp;text=desktop 400w,
             http://placehold.it/300x150&amp;text=mobile 300w"
     sizes="(max-width: 480px) 300px, 400px">

注意：如果使用 srcset 并且较大的候选图像在缓存中，Chrome 将始终显示此缓存的候选图像 - 无论实际视口大小如何。

【讨论】：