CSS3 背景图像不垂直拉伸

Question

我在垂直拉伸背景图像一直到底部时遇到问题。我知道我可以在容器类.view-index上设置height或min-height，但不想手动设置高度属性，因为我希望图像在用户调整浏览器大小时响应浏览器大小。

虽然背景图像向下延伸，但我不希望它覆盖第二张图像，.view-extra img。

我想实现的示例：https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/intro-transparent.html

这是我的JSFiddle(更新(

Answer 1

将高度设置为 100vh 将为您提供所需的内容。

.view-index {
background: url("http://i.imgur.com/f6f5Xq7.jpg") no-repeat center center;
background-size: cover;
display: -webkit-flex;
display: flex;
height: 100vh;
}
.view-text {
color: white;
margin: auto;
text-align: center;
}

<div class="container">
<div class="view-index">
<div class="view-text">
<h2>This Navbar isn't fixed</h2>
<h5>When you scroll down it will disappear</h5>
<br>
<p>Full page intro with background image will be always regardless of device </p>
</div>
</div>
<div class="view-extra">
<img src="http://i.imgur.com/0NCooNY.jpg">
</div>
</div>

Answer 2

像这样的东西？

.view-index {
background: url("https://mdbootstrap.com/img/Photos/Others/img (42).jpg") no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view-text {
	color: white;
	margin: auto;
	text-align: center;
}

<div class="view-index">
	<div class="view-text">
		<h2>This Navbar isn't fixed</h2>
		<h5>When you scroll down it will disappear</h5>
		<br>
		<p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
	</div>
</div>