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;
}

How it should look [Img]

What it looks like in a tall browser [Img]

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

我试过了：

background-size: auto 100%;

这只会使背景变得非常大。

感谢任何帮助：）

Answer 1

您可以使用vh meassure，如下所示：

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 2

Here是一个类似的演示。在背景大小上设置vh（查看高度）和cover可以解决您的问题。 article更深入一些。

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 3

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

＆＃13;

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%;
  }
}

＆＃13;

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

3 个答案: