如何使用100％宽度和高度的图像填充DIV？ [英] How do I fill a DIV with an image 100% in width and height?

问题描述

我有一个带有页脚和标题的网页。在我之间我有一个名为home_wrapper的DIV。我想用图像填充它并将其缩放到任何浏览器大小而不会扭曲图像的形状。我看到很多解决方案用于填充整个页面，但我需要用图像填充DIV。

I have a webpage with a footer and header. In between I have a DIV called "home_wrapper". I want to fill it with an image and scale it to any browser size without distorting the shape of the image. I see a lot of solution s for filling the whole page, but I need to fill the DIV with an image.

这是我的网页：www.givemehop​​e.com

Here is my webpage: 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％：

My jQuery script to make the the "home_container" be 100% in height is:

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

推荐答案

为此，请添加 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 ，请参阅其关于MDN的文章。

这篇关于如何使用100％宽度和高度的图像填充DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！