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%可能是您正在寻找的，但这会不成比例地调整图像（即：根据方向拉伸或压缩）。但是，当你说＆＃34;它们都涵盖并包含＆＃34;时，它听起来就像你想要的那样。

有很多方法可以放置和缩放用作背景的图像（背景不一定意味着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;
     }

重要的是你的图像彼此保持紧密的比例 - 如果它们略微偏离，对于大多数人来说，大多数人都不会看到轻微的失真

同样，还有其他方法可以实现这一目标。您链接的网站应用了类似的概念。概念是相同的，方法略有不同（例如，它们使用宽度：100％在图像上而不是绝对定位它们），其中概念=＆＃34;使用某种方法将图像按比例分配到容器所以它会神奇地缩放＆＃34;

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

Answer 2

您链接的页面保持容器的宽高比不变。

您可以使用宽度和高度的两个vw单位（例如）

来获得此效果

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: