Question

:)

我有一个响应式标题。

这里是英雄部分的代码：

.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没有改变，按钮和文本元素保持向下移动。

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

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

Answer 1

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

的底部

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

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

但是你明白了:)

Answer 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>

如何使用VH获得响应式英雄背景图像？

2 个答案: