css - 背景大小的封面剪裁问题

Question

我正在使用background-size: cover属性来制作具有背景图像响应的 div 。但它被剪掉了，这是不需要的。有什么方法可以避免剪裁并获得响应式图像？我什至尝试用 img 标签替换 div并使用背景大小的封面到 img 标签文章以使其看起来相似。问题仍然占上风。

这是具有背景图像的 div 的 css：

.slides {
  width: 100%;
  height: 100%;
  background: url("images/image1.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

截图：被剪辑后（图片上面提到了分辨率）

实际图像：

Answer 1

如果这有帮助 - 完全支持响应式图像，您可以使用

picture
sizes

您可以根据视口宽度选择不同的图像资源。只需使主要主题在拉伸图像中可见，然后在所需的视口断点处选择此图像资源。本文详细介绍了它。