Html 如何使用VH制作一个反应灵敏的英雄背景图像？

：）

我的头球反应灵敏

以下是英雄部分的代码：

.hero {
    background: url(../../img/hero.jpg);
    background-size: cover;
    background-position: center center;
    position: relative;
    height: 100vh;
    margin: 0;
    @include breakpoint($x-large) {
        padding-left: 5%;
        padding-right: 5%;
    } 

一切都很棒，反应灵敏；然而，当我打开网络上的控制台或android上的键盘时，vh并没有改变，按钮和文本元素保持向下移动

我尝试过添加填充和特定媒体查询以及其他解决方案，但我找不到一个通用有效的解决方案

---

为什么会发生这种情况？我如何解决此问题？

您需要将

.container hero

附加到

.hero

的底部

.container-hero {
  position: absolute;
  bottom: 5%;
}

由于

position:absolute

但是你明白了：）


div{
宽度：100%；
高度：400px；
背景图像：url（'http://i.stack.imgur.com/gwAUR.jpg');
背景大小：100%100%；
边框：1px纯红；
}
调整浏览器窗口的大小以查看效果

调整窗口大小时，图像会倾斜。