移动横向模式下的 CSS 背景全高和 100% 宽度答案

【问题标题】：css background full height and 100% width on mobile landscape mode移动横向模式下的 CSS 背景全高和 100% 宽度
【发布时间】：2015-10-14 20:31:21
【问题描述】：

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

我看到他们正在使用一些框架，我如何在没有任何框架的情况下做到这一点。当我尝试这样做时，我使用background size:contain，但它会将背景图像匹配到设备屏幕高度。

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

任何帮助都会很棒

【问题讨论】：

你能用你的代码创建一个 JSFiddle 吗？我需要一些工作。
请jsfiddle.net/z1L12opp 我从这里开始。 jsfiddle 上有移动视图吗？

标签： html css image background

【解决方案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/

【讨论】：

非常感谢，这让我更接近解决方案，但图像被水平切割drive.google.com/file/d/0B3d0pVneiBhScFpERXF4dzMyaUk/…我在做什么错
是的，你是对的，在这种情况下，你必须使用background-size: 100% 100%; background-position: contain;查看我的编辑。
在桌面视图中，该图像被拉伸。也许你应该在这里使用媒体查询。
我使用媒体查询，在桌面视图中一切都很完美。但在移动设备上我无法让它工作
vh 将在移动模式下为您提供帮助。试试我的例子，会奏效的。

【解决方案2】：

您将在下面找到我创建的符合您需要的 JSFiddle 演示。我使用了新的 CSS 维度属性 vh，它让元素占据了 Visible H八的 X%。

参考Can I use website 的vh 属性，您的代码将无法在IE8 及以下版本中运行，并且可能在后续版本中无法正常运行。

editable JSFIddle/Full screen JSFiddle

EDIT：背景跟随滚动

【讨论】：

谢谢，但是当我打开窗口jsfiddle.net/2mwo4p44/2 时，图像会被垂直切割，有没有办法在保持完整图像的同时保持纵横比？