如何使用 VH 制作响应式英雄背景图像？答案

【问题标题】：How to have a responsive hero background image with VH?如何使用 VH 制作响应式英雄背景图像？
【发布时间】：2016-12-02 06:27:48
【问题描述】：

我有一个响应式标题。

这是英雄部分的代码：

.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%;
    }

这一切都很棒而且反应灵敏；但是，当我在 web 上打开控制台或在 android 上打开键盘时，vh 不会改变，并且按钮和文本元素保持向下移动。

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

为什么会发生这种情况，我该如何解决？

【问题讨论】：

标签： html css responsive-design background background-image

【解决方案1】：

您需要将.container-hero 附加到.hero 的底部。

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

由于position: absolute;，您还需要修复布局。

但你明白了:)

【讨论】：

【解决方案2】：

<style>
div {
    width: 100%;
    height: 400px;
    background-image: url('http://i.stack.imgur.com/gwAUR.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>

【讨论】：

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