如何填充寬度和高度爲100％的圖像DIV？

我有一個頁腳和頁眉的網頁。在我之間有一個名爲「home_wrapper」的DIV。我想用圖像填充它，並將其縮放到任何瀏覽器大小，而不會扭曲圖像的形狀。我看到很多解決方案來填充整個頁面，但我需要用DIV填充圖像。如何填充寬度和高度爲100％的圖像DIV？

這裏是我的網頁：www.givemehope.com

#home_wrapper { 
    overflow:auto; 
    padding: 0; 
    margin:0; 
    font-family:'open_sansregular'; 
} 
#home_container { 
    width: 100%; 
    height: 100%; 
    overflow:hidden; 
    min-height:830px; 
    background: url('img/home_page.jpg') 50% 50% no-repeat 
}

我的jQuery腳本做出了「home_container」在高度100％是：

$(document).ready(sizeContent); 
$(window).resize(sizeContent); 
function sizeContent() { 
    var newHeight = 
     $("html").height() - 
     $("#top_nav").height() - 
     $("#footer").height() + "px"; 
    $("#home_container").css("height", newHeight); 
}

來源

2014-05-21 Erik

添加一個圖片標籤，將其設置爲絕對位置，並且100％高度和寬度，問題解決，接下來！ – user3649503

CSS：'background-size：cover' – j08691

要做到這一點，添加background-size: cover像這樣：

#home_container { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    min-height: 830px; 
    background: url('img/home_page.jpg') 50% 50% no-repeat; 
    background-size: cover; 
}

有關background-size的更多信息，請參閱its article on MDN。

來源

2014-05-21 16:46:47 LGVentura

如何填充寬度和高度爲100％的圖像DIV？

回答

相關問題