是否有一个 srcset 等效于 css 背景图像

Question

img 和 srcset 属性看起来是制作响应式图像的好方法。是否有适用于 css background-image 属性的等效语法？

HTML

 <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

CSS

 .mycontainer {
    background: url('what goes here?');
}

原文由 Martin Algesten 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

image-set 是等效的 CSS 功能。我们应该在规范中添加等效的 srcset 功能（根据资源的维度定义资源）。

目前在所有带有 -webkit- 前缀的主要浏览器（Firefox、Chrome、Safari、Edge）中实现。 Safari 仅支持支持 x 描述符。

原文由 Yoav Weiss 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

另一种方法，坦率地说更稳健，是使背景图像的特征和选项适应具有 srcset 属性的图像。

为此，将图像设置为 width: 100%;高度：100%；和对象适合：覆盖或包含。

这是一个例子：

 .pseudo-background-img-container {
  position: relative;
  width:400px;
  height: 200px;
}
.pseudo-background-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 <div class="pseudo-background-img-container">

<img class="pseudo-background-img" src="https://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg" srcset="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg 640w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-280x175.jpg 280w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-432x270.jpg 432w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-216x135.jpg 216w" sizes="(max-width: 640px) 100vw, 640px">

</div>

这可能不是每个人的最佳方法，但我想它会在没有任何 javascript 解决方法的情况下获得最理想的结果。

原文由 Parks 发布，翻译遵循 CC BY-SA 4.0 许可协议