css - 有没有办法将背景大小设置为包含和覆盖？

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/做到了(检查着陆页上的 slider 图像)，无论我给高度值多少，我的底部都被切断了

Answer 1

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

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

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

有很多方法可以放置和缩放用作背景的图像(其中背景不一定表示 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)。