我正在尝试动态更改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;
}
What it looks like in a tall browser [Img]
在第二张图片中,您可以看到背景下方有一个白色间隙。我想让它放大图片,以便在手机上看起来不错。所以我希望背景高度与窗口高度相同,宽度要适当改变以不拉伸它。
我试过了:
background-size: auto 100%;
这只会使背景变得非常大。
感谢任何帮助:)
答案 0 :(得分:0)
您可以使用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查找屏幕高度,然后在标签中设置所需的大小。
答案 1 :(得分:0)
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
}
答案 2 :(得分:0)
您可以在aspect-ratio
次查询中使用@media
,并根据需要更改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%;
}
}
&#13;