如何获得100％高度的背景图像？

Question

我正在使用高度为5000像素的图像，我想让它在宽度和高度上始终显示100％以覆盖背景，在移动设备和桌面设备中。

.main {
  position: relative;
  background: url('../images/background.png') no-repeat top center; 
  background-size: cover;
  width: 100%;
}

此代码不起作用，这使她不会出现。我总是需要设置一个高度，问题是移动设备的高度与桌面不同。

所以你可以说..＆＃39;你可以设置高度：100％＆＃39; ..我做了..但没有任何反应，图像不会出现，只有我设置了pxs

Answer 1

更新

我觉得我很想更新我的答案，因为我显然错误地理解了这个问题。我将旧版本保留在底部，因为很明显很多人发现它很有帮助，即使它没有回答原来的问题。

由于您的背景图片正在重复，我假设您不想要整个图像，只需要您需要的任何高度。所以，你需要两件事：

1. 在.main
上设置高度
2. 完全摆脱background-size

所以，这应该对你有用：

.main {
  position: relative;
  background: url('../images/background.png') no-repeat top center; 
  width: 100%;
  height: 100%;
}

如果我的假设是正确的，那么还有一件事：你不需要超过5000px的背景来实现你的目标，只需将其降低到1px高度（即你想要的背景的1行）并将你的CSS更改为：

.main {
  position: relative;
  background: url('../images/background.png') repeat-y top center; 
  background-size: cover;
  width: 100%;
}

我希望这会有所帮助

OLD VERSION

.main没有身高，height:100%;无法正常工作，因为包含它的元素本身没有身高。

一种可能的解决方案是添加：

html, body, .main {
  height:100%;
}

这可能正是您所需要的，但您也可能遇到此解决方案的其他问题。这一切都取决于你实际想要实现的目标。

其他可能的解决方案：

使用视口单元

.main {
  height:100vh;
}

请注意，某些移动设备对这些内容的解释与您期望的不同。

将背景添加到正文

body {
  background: url('../images/background.png') no-repeat top center; 
  background-size: cover;
}

正如我之前所写：很难说哪种解决方案最好，这取决于你的目标。

Answer 2

您正在使用背景图像...请记住，渲染图像的大小与其自身的图像无关，但创建的元素包含它。

现在，如果您希望图片以100％的高度和宽度显示，则可以使用属性background-size: contain，而不是封面。 这将告诉浏览器不应裁剪您的图像（只要您为.main元素设置了高度）。

在我看来，如果您只使用<img>标记而不是css背景，那么您想要的效果就更容易了。

Answer 3

您是否尝试过添加此样式？

html, body{ height: 100%;}

然后在height:100%; div

中添加.main

Answer 4

我有一个关于弹性盒不能适应背景高度的问题，下面的代码适合我。其余的背景大小，重复和位置取决于您的情况。

html{
    height:auto;
}
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}