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/

Answer 2

您将在下面找到符合您需求的JSFiddle演示。我使用了新的CSS维度属性vh，它允许元素占用 V 可见 H 八的X％。

请参阅vh keyup属性，您的代码将无法在IE8 及以下版本中运行，并且可能无法在其他版本中正常运行。

Can I use website / editable JSFIddle

编辑：背景跟随滚动

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

2 个答案: