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/