响应式整页图像（100% 高度）

Question

虽然有很多关于这个特定主题的内容，但我已经尝试了其他人的指点，但无济于事。

我有一个带有 id=headerimg 的 div，如下所示：-

如您所见，我使用了常见的 css 作为全宽响应图像：-

#headerimg {
    background: url(http://www.adamoxenhamsmith.co.uk/site/img/NewYork.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

正如您将在 JSFiddle link 中看到的那样，我的图像没有响应，即使我将最小高度设置为 100% 也没有任何反应。

另请注意，顶部的四个点表示我的导航没有样式。

非常感谢您的帮助。

Answer 1

如果要将元素的高度设置为 100%，还需要设置父元素（在本例中为主体）的高度。如果您将 height: 100% 添加到您的 #headerimg 元素并将以下内容添加到您的 CSS:

html, body { height:100%; }

这应该会以全高显示您的图片。

响应式整页图像（100% 高度）

Responsive full page image (100% height)

css

height

background-image

responsive