html - 使用 bootstrap/css 根据屏幕大小更改背景图像的高度

Question

我有一个页面，我在其中使用 bootstrap 进行设计。现在我正在使用网格；我想为图像保留 8 列，为文本保留 4 列。所以我有以下代码:-

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="bg"></div>
        </div>
        <div class="col-md-4">
            hi how are you
        </div>
    </div>
</div>

以下是类 bg 的 css:

.bg {
    background-image: url('../images/2.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:690px;
}

现在一切正常，但我在这里遇到一个小问题，我在超小屏幕上检查它，图片几乎占据了整个屏幕，对于文本我必须滚动到底部。

有没有什么方法可以调整超小屏幕的图像高度(宽度效果很好)，这样图像和文本就可以一起看到而无需太多滚动？

Answer 1

尝试在 CSS3 中使用视口(viewport)高度:

.bg {
    height:100vh;
}