使用object-fit: cover和srcset

Question

我在一起使用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的图像。但由于对象适配:覆盖设备实际上需要更大的尺寸才能正确显示(而不是模糊)。例如，同一设备上的图像将是284 CSS px高，所以实际上是568像素，这意味着它需要1600px x 688px的图像。

对如何处理这个问题有什么建议吗？

Answer 1

我认为使用属性sizes可以指定当视口具有一定宽度时加载哪个图像。sizes定义了使用来自srcset的镜像所基于的介质条件。link