无论如何将背景大小设置为包含和覆盖？

Question

这是我的尝试https://codepen.io/alexyap/pen/VbvGvw

<div id="bg">
</div>



* {
  margin: 0;
  padding: 0;
}

#bg {
  background: url('https://static.pexels.com/photos/198747/pexels-photo-198747.jpeg');
  height: 60vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100vw;
}

我几乎想通了，但我似乎无法复制这个网站https://sierradesigns.com/ 是如何做到的（检查登陆页面上的滑块图像），无论我给高度多少值，我的底部都被切断了

Answer 1

通过将背景大小设置为cover，您将赋予浏览器调整图像直到完全覆盖该区域的特权；它会忽略您分配的宽度和高度值。

使用contain，您允许浏览器决定如何调整图像以使整个图像适合该区域，这可能基于高度或宽度来完成此操作（取决于图像的方向宽或高)。

background-size: 100% 100% 可能是您正在寻找的，但这会不成比例地调整图像（即：根据方向拉伸或压缩）。但是，当您说“既涵盖又包含”时，这听起来确实是您想要的。

有很多方法可以放置和缩放用作背景的图像（其中背景不一定意味着 CSS 背景属性）

以下是我如何完成此操作的简化示例（假设图像大约为 700x300 像素）

.container-wrap {
     width:100%;
     }
 .container {
     position:relative;
     padding:42.86% 0 0 0;
     /* where padding = the proportion of the images width and height
     which you can get by division: height / width = 0.42857 */
     }
 .container img {
     position:absolute;
     top:0px;
     right:0px;
     bottom:0px;
     left:0px;
     }

重要的是，您的图像之间要保持接近的比例 - 如果它们稍微偏离，那么对于大多数图像来说，大多数人应该看不到轻微的失真

同样，还有其他方法可以做到这一点。您链接到的网站应用了类似的概念。概念是相同的，方法略有不同（例如，他们在图像上使用 width:100% 而不是绝对定位它们），其中概念 =“使用某种方法将图像与容器成比例，因此它将神奇的规模”

请注意，同样的方法可以应用于视频容器（例如来自 YouTube）。

Answer 2

您链接的页面保持容器的纵横比不变。

您可以使用宽度和高度的 vw 单位来获得这种效果（例如）

#bg {
  background: url('http://lorempixel.com/1000/600/');
  height: 30vw;
  width: 50vw;
  background-size: cover;
}

<div id="bg">
</div>