使用对象拟合：cover 和 srcset答案

【问题标题】：using object-fit: cover and srcset使用对象拟合：cover 和 srcset
【发布时间】：2021-02-26 22:30:30
【问题描述】：

我在使用 object-fit:cover 和 srcset 时遇到了问题。我将图像设置为：

.banner-fit {
    object-fit: cover;
    height: 50vh;
    width: 100vw;
    max-width: 1300px;
}

并且图像像这样使用 srcset

<img srcset="
     ./assets/images/media/media-4x.jpg 3200w,
     ./assets/images/media/media-3x.jpg 2400w,
     ./assets/images/media/media-2x.jpg 1600w,
     ./assets/images/media/media-1x.jpg 800w,
 " src="./assets/images/media/media-2x.jpg" alt="Newspapers" class='banner-fit'>

问题是移动设备根据宽度选择图像。例如，具有 320 CSS px 屏幕且密度为 2x 的设备正在选择 800px x 344px 图像。但是由于 object-fit:cover 设备实际上需要更大的尺寸才能正确显示（不要模糊）。例如，同一设备上的图像将是 284 CSS px 高，因此实际上是 568 像素，这意味着它需要 1600px x 688px 的图像。

对如何处理有什么建议吗？

【问题讨论】：

标签： html css

【解决方案1】：

我认为使用属性sizes 我们可以指定当视口具有一定宽度时要加载哪个图像。 sizes 定义使用来自srcset 的图像的媒体条件。 link

【讨论】：

我不确定这是否解决了我的问题。你能举个例子吗？