Question

我是CSS的新手，所以这可能非常简单。我搜索了一堆这个问题的答案，但我还没有找到它。我想div，包含徽标，根据页面大小拉伸和缩放，我几乎有这个工作，但如果页面太短，背景图像的顶部和底部被切断。这是网站，所以你可以看到发生了什么。

这是相关的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告诉渲染引擎确保背景适合容器而不改变宽高比。

Answer 2

如果我理解你，请尝试使用

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

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

2 个答案: