html - 当页面太短时，div 中的背景图像在顶部和底部被截断

Question

我是 CSS 的 super 新手，所以这可能真的很简单。我已经搜索了一堆这个问题的答案，但我还没有找到它。我想要 div，包含根据页面大小拉伸(stretch)和缩放的 Logo ，我几乎可以正常工作，但如果页面太短，背景图像的顶部和底部就会被切断。这是该站点，因此您可以看到发生了什么。

chaptertwollc.com

这是相关的 CSS。

.centerLogo {
    height: 50%;
    width: 50%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    visibility: visible;
    background-repeat: no-repeat;
    background-image: url(../POP%20high%20res%20logo%20ellipse%20black%20glow%20webop.png);
    background-size: 100%;
    background-position: center center;
    background-attachment: scroll;
}

编辑:我让它工作了。就像改变一样简单

background-size: 100%;

到

background-size: contain;

Answer 1

跨浏览器解决方案是这样的 Svoka ​​使用了错误的 CSS 值...

-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;

Contain 告诉渲染引擎确保背景适合容器而不改变宽高比。