无法使用 CSS 将图像扩展为 100% 的浏览器高度 [重复]

Posted 2023-03-06

【中文标题】无法使用 CSS 将图像扩展为 100% 的浏览器高度 [重复]

【英文标题】：Trouble expanding image for 100% of browser height with CSS [duplicate]

【发布时间】：2014-06-30 11:04:40

【问题描述】：

我想为浏览器HEIGHT的100%展开主图。

这就是我所拥有的：

.home-splash 
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    background: url("http://www.matthewkosloski.me/hero-3a.jpg") center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

使用此代码，英雄图像（或初始图像）仅扩展至标题的高度。但是，使用width: 100vh; 可以（在某种程度上）避免这个问题。我不喜欢这样，因为在移动设备上，英雄图像的高度真的很大……比如 5000px 的高度。我只是想让它扩大浏览器的精确高度。

这里是 jsFiddle :: http://jsfiddle.net/E7rDG/

【参考方案1】：

您需要将html/body元素的高度设置为100%。

Updated Example

html, body 
    height:100%;

【讨论】：

谢谢，乔希！这是一个很好的解决方案。我一定会把它包含在我的 CSS 重置中，以备将来使用。 ;)