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

我正在使用背景尺寸的封面来制作要在您进入网站时全屏显示在主页上的图像。

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

这样就可以了，现在您仍然可以在移动屏幕上看到完整图像。但是很显然，它并没有填补所有背景。它上方和下方都有空白。因此，我要输入的文字和徽标将出现在图像上方的空白区域，而不是图像内部的小字体。我不知道如何执行此操作，因为我要放置的文本和内容最初是在div中以这张图片为背景的。

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

您可以在www.text.hdeprada.com上看到该站点。这是一个简单的页面，其中包含我要解决的问题。

最佳答案

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

关于html - 在小屏幕上显示自己的div之外的内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34963576/