Question

我正在开发一个基于bootstrap的网站，我已经在它上面放了一个大图像。

<div class="container-fluid introimage">
    <img src="img/wald.gif">
</div>

现在我希望容器的高度与浏览器窗口一样高，我想让图像在容器底部对齐，以确保图像的底部始终可见。< / p>

我尝试了一些东西，但它根本不起作用：

.introimage {height: 100%;}
.introimage img {vertical-align: bottom;}

你能帮帮我吗？提前谢谢！

这是网站：http://baustelle.injuvik.de

Answer 1

使用最小高度：100％高度：100％身体 .introimage { 身高：100％; 最小高度：100％; } html，body { 身高：100％; 最小高度：100％; }

Answer 2

使用单位vh。它代表视口高度，从0到100。

.introimage{
    height:100vh;
}

Answer 3

在样式表中添加以下规则，我所做的是将容器设置为固定位置;因此它可以在屏幕上工作并使其高度，宽度为100％以便覆盖整个屏幕，然后我将元素从左上角和最后一组中对齐以覆盖完整的父div，从而间接覆盖强制浏览器窗口。 / p>

.introimage {
    height: 100%; 
    position:fixed;
    top:0;
    left:0;
    width:100%
}
.introimage img {
    height:100%;
    width:100%
}

Answer 4

将图像放在容器的背景中。

只需将这些样式应用到您的网站，它就可以运作

ini_set("session.save_handler", "files");
session_save_path ("/tmp");

Answer 5

我建议您为舞台使用较新的vh测量值，这将使任何元素成为veiwport的高度值为100.

.introimage {
    position: relative;
    height: 100vh;
    background-color:transparent;
}

然后我会将该图像用作背景图像而不仅仅是图像标记。我可能会将它添加到.introimage的后伪元素。

.introimage:after {
    content:'';
    display:block;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background: url(images/bg.jpg) no-repeat center bottom fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

https://css-tricks.com/perfect-full-page-background-image/

告诉图像覆盖整个浏览器窗口

5 个答案: