按比例调整背景图像大小

Question

我有一个容器div：

<div id="fullpage" class="fullpage_bg">
    ...rest of the elements
</div

它有纵向和横向的背景图像：

#fullpage {background-color: rgba(0,0,0,0.2); background-position: center center;}
@media screen and (orientation:portrait) {
    .fullpage_bg{
        background-image: url('images/bg_portrait.jpg');
    }
}
@media screen and (orientation:landscape) {
    .fullpage_bg{
        background-image: url('images/bg_landscape.jpg');
    }
}

对于不同的屏幕尺寸，有没有办法按比例缩放图像，使用CSS或纯JS（无jQuery）？ 例如：对于横向图像，图像可能占据屏幕的整个高度，但两侧仍有一些边距（因为图像必须保持比例，但仍尽可能地填满屏幕）。 在纵向中，它可能需要整个宽度，但在顶部和底部有一些边距。 谢谢！

Answer 1

我强烈推荐Chris Coyier的完美全页背景技巧 。

诀窍是将background-size属性设置为cover，将attachment属性设置为fixed。

 html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

Answer 2

你可以试试

background-size: cover

要么

background-size: contain

有关此酒店的详情，请参阅此处