背景图像缩放到 html 文档高度答案

【问题标题】：Background image scaled to html document height背景图像缩放到 html 文档高度
【发布时间】：2021-07-23 06:50:50
【问题描述】：

我无法将重复图像缩放到 html 中文档的高度。我可以清楚地看到使用检查器的 html 元素有多大。

我已将 div 的高度设置为 100rem，这应该将其缩放为根元素高度的 100%（据我所知是 html 元素）。

CSS：

#left-buildings{
    left: 0;
    float:left;
}

.buildings{
    height: 100rem;
    position: absolute;
    width: 5%;
    top: 0;
    background-image: url(../media/images/city-side-seamless.png);
    background-repeat: repeat-y;
    background-size: contain;
}

HTML：

    <div class="buildings" id="left-buildings"> </div>
    <div class="buildings" id="right-buildings"> </div>

问题是，它没有缩放到正确的大小。

screenshot showing that the element is not spanning the height of the page

【问题讨论】：

1 rem 表示默认字体大小。在大多数浏览器中，1 rem 默认为 16px。
所以我认为你的意思是 100vh。
哦，是的，我的坏XD。

标签： html css css-selectors

【解决方案1】：

我设法解决了这个问题，但将建筑物的高度设置为适合页面长度的像素测量值。这可以防止建筑物在放大页面时形成缩放。非常方便，它还可以让末端“溢出”，并且在缩放时不会扩展页面高度。不太清楚为什么会这样，但我不是在抱怨 XD。

【讨论】：

【解决方案2】：

我会将图像作为 img 标签放在 div 中，然后您可以将它们设置为 100% 高度。

【讨论】：

【解决方案3】：

尝试将高度更改为 100vh。 rem 是相对于根元素的字体大小

【讨论】：

问题是，建筑物需要超出视口高度。将其设置为 veiwport 高度会使它们扩展到大约 html 文档的中间。我尝试使用 rem，因为它们需要是整个 html 文档的高度。如果您将鼠标悬停在检查器中的 html 标记上，您可以看到它覆盖了整个页面，而不仅仅是在 vewport 中可见的部分。