Question

我有一个带有页脚和标题的网页。在我之间我有一个名为＆＃34; home_wrapper＆＃34;的DIV。我想用图像填充它并将其缩放到任何浏览器大小而不会扭曲图像的形状。我看到很多解决方案用于填充整个页面，但我需要用图像填充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脚本来制作＆＃34; home_container＆＃34;高度为100％是：

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

Answer 1

为此，请添加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。

如何使用100％宽度和高度的图像填充DIV？

1 个答案: