html - Div的高度响应

Question

我写信给你有很大的问题，

如果您缩小浏览器窗口，高度不会改变。有人可以帮我解决吗？

这是 html 的片段(带有图像背景):

<div class="container">
<div class="slider" id="section1">
<div class="naglowek">
<h1>POLSKA - FRANCJA</h1>
<h2>NIEMCY - LUXEMBURG - BELGIA</h2>
<h3>Szybki i bezpieczny transport od drzwi do drzwi</h3>
<br />

<button type="button" class="btn btn btn-danger btn-lg" onclick="window.location.href='#section5'">ZAREZERWUJ</button>
</div>
</div>
...

和css片段:

.slider{
    width:100%;
    height: 700px;
    margin-top: 58px;
    background-image: url("img/baner2.png");
    background-size: 100%;
    background-repeat: no-repeat;
    color: #ffffff;
    display: block;
}
.container{
    position: relative;
    height: 100%;
    margin: 0 auto 0;
}

我知道，现在 height: 700px; 不好，但我不知道如何解决。

我使用 Bootstrap 。

Answer 1

使用媒体查询来修复它，所以一旦屏幕变小，你就可以降低 div 的高度。

@media only screen and (max-width: 500px) {
.slider{
width:100%;
height: 300px;
}
}

表示一旦屏幕小于500px，高度会降低