html - 小屏幕显示自己div之外的内容

Question

当您进入网站时，我希望在主页全屏显示的图像使用背景大小的封面。

.image1{
    background: url(../img/nike.jpg) no-repeat center center;
    width: 100%;
    padding: 20px 10px 60px 10px;
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

但是，由于图像真的很宽，我希望当您用手机进入该站点时，它全部显示在屏幕上。这就是我使用以下媒体查询的原因:

@media (max-width:600px) {
                        .image1{
                            width:70%;
                            background-size: contain;
                        }
                    }

这很有效，现在您仍然可以在移动屏幕上看到完整的图像。但显然它并没有填满所有的背景。它的上方和下方都有空白。所以我想要的是我要放置在图像上方的空白区域中的文本和 Logo ，而不是图像内部的小尺寸。我不知道如何执行此操作，因为我放置的文本和内容最初位于以该图像为背景的 div 中。

我能想到的唯一解决方案是将媒体查询中的 margin-top 设置为 -200px，但我认为这不是一个很好的做法。

您可以在 www.text.hdeprada.com 中看到该网站。这是一个简单的页面，我正在尝试修复这个问题。

Answer 1

使用 backstretch js ，它会解决你的问题。它简单可靠。