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，高度将降低

Answer 2

嗯，所以你可以使用＆＃34; vw＆＃34;在高度上，这将强制容器的高度听取浏览器窗口的宽度（并相应地向上或向下滑动所有内容）。这将使它对于广泛的浏览器来说非常高，但你可以设置700px的最大高度。

所以：

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

.naglowek {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

Div的身高反应灵敏

2 个答案: