html - 具有重叠内容的背景图像取决于移动或桌面 View

Question

遇到移动设备/平板电脑和桌面设备之间的布局问题。

对于移动设备:我需要先是主图，然后是其下方的内容。 ( sample here )

对于平板电脑/台式机:我需要将内容放在英雄图片的顶部。 ( sample here )

我试过使用背景图片，但发现调整页面布局会影响背景图片的大小和比例

我已经尝试将一个绝对放置在另一个之上，但遇到了这样一种情况:我最终摆弄 View 之间的布局(使用 Bootstrap )超过了应该可以管理的范围。

很想知道如何产生这个结果。

将尝试提供我所做的代码示例，但不确定它是否相关，因为它们似乎都没有产生预期的结果。

Answer 1

这是我为您创建的一个简单示例，请检查:

#container {
    background: red;
    text-align: center;
    padding: 20px 0px;
}
#image, #content {
    display: inline-block;
    width: 45%;
    vertical-align: middle;
}
#image img {
    width: 100%;
}

@media (max-width: 500px) {
    #image, #content {
         display: block;
         width: 100%;
    }
}

<div id="container"><div id="image"><img src="http://placehold.it/350x150" /></div><div id="content">Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. </div>

点击Run Code Snippet并在 Full Page 中查看以上片段然后将浏览器窗口缩小到 500px或更小，您会看到内容会自动位于图像下方。最初，<div>包含图像和内容显示为 inline-block但对于小于 500 像素的屏幕，我们使用 @media-queries改变他们的display属性(property)block这就是内容位于图像下方的原因。