Question

使用scrset？

时是否可以防止升级？

这是一个jsbin，显示我在说什么：

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

有没有办法防止这种情况而无需编写内联style="max-width:500px"？

Answer 1

即使提供了低分辨率图像，看起来srcset的图像也会一直升级。很难在此搜索文档，因为人们使用的所有示例都假设您已经拥有高分辨率图像。就我而言，我正在构建一个“响应式图像”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标记会获得最大可用图片的最大宽度。

因此，如果源图像只有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>

如果源图像的宽度为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>

以下是它最终的结果：在这种情况下，第三张图像的高分辨率不足以跨越整个列：

防止scrset升级？

1 个答案: