背景大小封面裁剪问题

Question

我正在使用 background-size：cover 属性制作带有背景图片响应的div。但它正在被剪裁，这是不需要的。有什么方法可以避免剪辑，并获得响应式图像？ 我甚至尝试使用img标记替换div 并使用Background-size cover to img tag文章使其看起来相似。问题仍然存在。

以下是具有背景图像的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

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