如何填充宽度和高度为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？

回答

相关问题