当浏览器 windows 缩放时，页脚图像重复或创建空白

Question

我有一个页脚不固定的网页，也就是说，如果您滚动到页面底部，页脚就在那里。它有一个背景图像，需要根据浏览器大小缩放并在 IE11 上工作。当浏览器最大化时，页脚显示正确，但当我将其调整为更小时，页脚重复。所以，我设置：

background-repeat: no-repeat;

但是，这会导致完全相同的问题，只是重复的部分被替换为空格。

当页脚图片因浏览器调整大小而被迫缩放时，如何才能使其不重复或显示额外的空白？

.footer {
    position: absolute;
    width: 100%;
    background-image: url("../image.png");
    height: 190px;
    background-size: 100%; 
    background-repeat: no-repeat;
}

<div class="footer">
        FOOTER
</div>

Answer 1

不要将背景大小设置为 100%，而是将其设置为包含或覆盖：

.footer {
    position: absolute;
    width: 100%;
    background-image: url("../image.png");
    height: 190px;
    background-size: contain; /* 100% is cover */
    background-repeat: no-repeat;
}

另请参阅：Resizing background images with background-size and background-size-property

当浏览器 windows 缩放时，页脚图像重复或创建空白

Footer image repeats or creates whitespace when browser windows scaled

html

css

footer