如何在 CSS 中动态更改背景高度

Question

我正在尝试动态更改CSS中的背景高度。我有一个背景，当我向下滚动时会保持原位。因此，当我使用较高的浏览器窗口时，我希望它放大我的背景，这样它下面就不会有间隙。我的 CSS 是：

body {
    min-width: 100%;
    background-image: url("Photos/Tiger-4.jpg");
    background-position: 0px 0px;
    background-size: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

它应该是什么样子 [图像]

它在高大的浏览器中是什么样子的 [Img]

在第二张图片中，您可以看到背景下方有一个白色间隙。我希望它放大图片，以便在手机上看起来不错。所以我希望背景高度与窗口高度相同，并且宽度适当变化以免拉伸它。

我试过：

background-size: auto 100%;

这只会使背景变得愚蠢地大。

任何帮助都值得赞赏:)

Answer 1

这是类似内容的演示。设置背景大小的vh(视图高度(和cover应该可以解决您的问题。这篇文章更深入一些。

div {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    height: 90vh; // or whatever size you want it to be
}

Answer 2

您可以使用

vh测量，如下所示：

div{height: 100vh;
background-image: url("http://e03-elmundo.uecdn.es/assets/multimedia/imagenes/2015/11/13/14474300157302.jpg")
}

<div>
<p>
My text
</p>
</div>

但这只是一种方式。如果这不适合您，您可以将body和html设置为所需的标签height 100%，您将获得类似的效果。

其他可能的选项是使用 JS 查找屏幕高度，然后在代码中设置所需的大小。

Answer 3

您可以在

@media查询中使用aspect-ratio，并根据需要更改background-position。

body {
  background: url('http://elelur.com/data_images/mammals/tiger/tiger-06.jpg') 0 0 no-repeat;
  background-size: 100%;
}
@media (min-aspect-ratio: 3/1)  {
  body {
    background-position: center 20%;
  }
}