在小屏幕上显示他自己的 div 之外的内容答案

【问题标题】：Display content outside his own div in small screens在小屏幕上显示他自己的 div 之外的内容
【发布时间】：2016-01-23 21:26:28
【问题描述】：

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

.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 内，并以此图像为背景。

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

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

【问题讨论】：

我认为您的链接无法连接到实时网站

标签： html css media-queries background-image

【解决方案1】：

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

【讨论】：

【解决方案2】：

尝试用这个缩放div内的图像

background-size:200%;

调整百分比以满足您的需要

【讨论】：