Question

我想在我的网站内添加一个背景图片，这个div应该在所有设备上完美调整大小。我尝试了最简单的方法，例如＆＃34;身高：100％＆＃34;但那根本不起作用。我也试过媒体查询，这当然有效，但相当复杂，所以我想问一下是否有更简单的方法来解决这个问题。

这是HTML

<div class="bg"></div>

这就是CSS

.bg {
    background: url('bg.jpg') no-repeat center cover;
}

Answer 1

我还在学习自己，但你试过“背景大小：封面;”你的CSS？

在此处查看更多信息：https://www.w3schools.com/cssref/css3_pr_background-size.asp。

Answer 2

只需将尺寸首选项应用于您的背景属性即可。这是一个简写用法：

这是一个大背景图片的设置，将其父级填充到边框。

background: url('images/image.jpg') no-repeat center center/cover;

等于：

background-image: url('images/image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;

我建议您阅读 this MDN thread 。

Answer 3

我发现你可以使用＆＃34; height＆＃34;确实并将其设置为 100 ，但不是＆＃39;％＆＃39; ，而是＆＃39; vh＆＃39; 。< / p>

height: 100vh;

Answer 4

@Sqnkov有正确的答案。空div将与该设置一起使用。

尝试运行下面的代码并查看。（将其设为完整页面并调整浏览器大小）。 center center使Y轴和X轴居中。 background-size: cover;使图片覆盖所有可用空间。如果您想确保整个图片都在视野中，请改用background-size: contain;。

body{
  margin: 0; /* Stripping out margin and padding so .bg can be full width*/
  padding: 0;
}
.bg {
  box-sizing: border-box; /*Not necessary in this situation*/
  display: block; /*Not necessary, but we do want it this way*/
  width: 100vw;  /*Not necessary, but we do want it this way*/
  height: 100vh; /*Necessary.  100vh = 100% of the viewport height*/
  padding: 0; /* No padding */
  margin: 0; /* No margins */
  background: url('https://images6.alphacoders.com/405/405948.jpg') no-repeat center center;  
  /* Shorthand: image, repeat, X align, Y align. */
  background-size: cover; /* Cover all available space*/
}

<div class="bg"></div>

或者，如果您指定父容器'（html, body）的高度和宽度为100％，则可以在子{{1}上使用100%高度/宽度而不是100vh/vw容器百分比是相对于父容器的。

请参阅以下示例：

.bg

html, body{
  margin: 0; /* Stripping out margin and padding so .bg can be full width*/
  padding: 0;
  width: 100%;  /*Setting parent width -- child width is relative*/
  height: 100%; /*Setting parent height -- child height is relative*/
}
.bg {
  box-sizing: border-box; /*Not necessary in this situation*/
  display: block; /*Not necessary, but we do want it this way*/
  width: 100%;  
  height: 100%; /* Now 100% height will work */
  padding: 0; /* No padding */
  margin: 0; /* No margins */
  background: url('https://images6.alphacoders.com/405/405948.jpg') no-repeat center center;  
  /* Shorthand: image, repeat, X align, Y align. */
  background-size: cover; /* Cover all available space*/
}

如何根据屏幕大小缩放div中的背景图像

4 个答案: