使用scrset如何防止网页图片放大？

Question

在使用scrset时，有没有可能防止图片放大？

以下是一个jsbin示例，展示了我的疑问：

https://jsbin.com/bukupuq

浏览器（Firefox、Chrome、Safari）使用最大的图片来填充容器，即使它的宽度（500px）更小。我希望它能智能地根据视口宽度使用最佳图片，但不要将图像放大。

是否有一种方法可以防止这种情况发生，而不必编写内联的style="max-width:500px"？

- Good Idea

Answer 1

看起来带有 srcset 的图像总是会进行放大，即使提供了低分辨率的图像。很难搜索到相关文档，因为所有人使用的示例都假定您已经有高分辨率的图像。在我的情况下，我正在构建一个“响应式图像”React组件，该组件处理由CMS提供的用户提供的图像。但并非所有图像都是高分辨率的。

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

CSS：

img {
    max-width: 100%;
}

figure {
    width: 100%;
}

HTML：

此内容根据可用图像尺寸生成。在CMS侧，我会创建2400px、1600px、1200px、800px和400px宽的缩略图，但仅当源图像大于该尺寸时才创建。然后<figure>标签获取所有调整大小后的图像以及原始图像。然后为了防止图像放大，figure标签获得最大图像可用的最大宽度。

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

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

如果源图像宽度为1125像素，则会获得更多的源。

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

这是最终的效果：在这种情况下，第三张图片的分辨率不够高，无法跨越整个列。

- Good Idea