html - 移动横向模式下的 css 背景全高和 100% 宽度

Question

我正在构建一个着陆页，它必须是响应式的。但我有一个小问题。我在尝试定义背景图像时遇到问题。我想要的是，在横向模式下，图像将占据设备屏幕的整个宽度，但也会像 this example 中那样处于全高状态。

我看到他们正在使用一些框架，我怎么能没有任何框架呢？当我尝试这样做时，我使用了 background size:contain，但它会将背景图像调整为设备屏幕高度。

我看过一些示例，其中将图像放置在 html 中并将其转换为背景图像。我认为 z-index: -9999; 就像我给出的例子一样。但是当我尝试它时，图像不会进入背景。

任何帮助都会很棒

Answer 1

您可以使用 vh 和 vmax 来做到这一点。

一个例子:

CSS:

#im-full-height {
    background: url('https://upload.wikimedia.org/wikipedia/commons/d/d7/Philippine-stock-market-board.jpg') center center no-repeat;
    background-size: 100% 100%;
    background-position: contain;
    height: 100vh;
}

HTML:

<div id="im-full-height"></div>

Demo

基于您的 JSFiddle 链接的演示:https://jsfiddle.net/z1L12opp/2/