背景大小的封面剪裁问题答案

【问题标题】：Background-size cover clipping issue背景大小的封面剪裁问题
【发布时间】：2016-02-28 04:55:09
【问题描述】：

我正在使用 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;
}

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

实际图片：

【问题讨论】：

background-size: cover 有意进行裁剪，即它确保元素的区域始终被覆盖。你到底想要什么？你试过background-size: contain吗？这会将整个图像保留在其元素内，但可能会产生空白。
我想要滑块中的全屏图像。所以我使用了具有背景图像的 div 元素（作为幻灯片）。但我也需要做出响应，这就是为什么我不使用 background-size: 100% 100% 或 background-size: contain 并跟上掩护。
所以... 在某些情况下，图像的纵横比不适合您的元素纵横比。除非您想不自然地拉伸图像，否则会有部分被切断或留空；这是简单的几何图形。
哦，谢谢。我了解，但有什么方法可以实现响应式全屏图像而不会被剪裁？或者至少尽量减少剪辑？
cover 实际上已经最小化了剪切，即它按比例拉伸背景图像直到元素被覆盖。

标签： css responsive-images

【解决方案1】：

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

picture
sizes

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

【讨论】：