防止使用 srcset 进行放大？

Question

使用scrset时是否可以防止放大？

这里有一个 jsbin 展示了我在说什么：

浏览器（Firefox、Chrome、Safari）使用最大的图像来填充容器，即使其宽度 (500px) 较小。我希望它能智能地使用给定视口宽度的最佳图像，但不会放大图像。

有没有办法避免这种情况而不必编写内联 style="max-width:500px"？

Answer 1

看起来带有 srcset 的图像将始终是高档的，即使提供的是低分辨率图像也是如此。很难搜索这方面的文档，因为人们使用的所有示例都假设您手头已有高分辨率图像。就我而言，我正在构建一个 'responsive image' React 组件，用于处理用户从 CMS 提供的图像。不过，并非所有图片都是高分辨率的。

我的解决方案涉及对 width 和 max-width 进行一些 CSS 平衡，包括图像本身及其包装 <figure> 标签。（这当然可以是 div 或其他任何东西）

CSS:

img {
    max-width: 100%;
}

figure {
    width: 100%;
}

HTML:

这是根据可用的图像尺寸大小生成的。在 CMS 方面，我正在创建 2400px、1600px、1200px、800px 和 400px 宽的缩略图，但仅如果源图像大于该宽度。 <figure> 标签然后获取所有调整大小的图像，以及原始图像。然后，为了防止图像放大，figure 标签获取最大可用图像的最大宽度。

因此，如果源图像只有 500 像素宽：

<figure class="" style="max-width: 500px;">
    <img src="http://example.com/images/img_7804a_web.jpg"
      srcset="http://example.com/images/img_7804a_web-400x600.jpg 400w,
              http://example.com/images/img_7804a_web.jpg 500w"
      sizes="100vw"
      alt="alt text">
</figure>

如果源图像是 1125px 宽，它会得到更多的来源：

<figure class="" style="max-width: 1125px;">
    <img src="http://stephanie.standard-quality.biz/content/projects/18-2016/3-cargo-cults/cargocults_basketwoman_web.jpg"
      srcset="http://stephanie.standard-quality.biz/thumbs/projects/2016/cargo-cults/cargocults_basketwoman_web-400x533.jpg 400w,
              http://stephanie.standard-quality.biz/thumbs/projects/2016/cargo-cults/cargocults_basketwoman_web-800x1067.jpg 800w,
              http://stephanie.standard-quality.biz/content/projects/18-2016/3-cargo-cults/cargocults_basketwoman_web.jpg 1125w"
      sizes="100vw"
      alt="alt text">
</figure>

最终效果如下：在本例中，第三张图片的分辨率不足以覆盖整列：

防止使用 srcset 进行放大？

Prevent upscaling with scrset?

html

srcset