按比例調整背景圖像大小

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

有關此酒店的詳情，請參閱此處