[英]How do I fill a DIV with an image 100% in width and height?
I have a webpage with a footer and header. 我有一个带有页脚和页眉的网页。 In between I have a DIV called "home_wrapper".
在这两者之间,我有一个称为“ home_wrapper”的DIV。 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.
我看到了很多用于填充整个页面的解决方案,但是我需要用图像填充DIV。
Here is my webpage: www.givemehope.com 这是我的网页: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
}
My jQuery script to make the the "home_container" be 100% in height is: 使“ home_container”的高度为100%的我的jQuery脚本是:
$(document).ready(sizeContent);
$(window).resize(sizeContent);
function sizeContent() {
var newHeight =
$("html").height() -
$("#top_nav").height() -
$("#footer").height() + "px";
$("#home_container").css("height", newHeight);
}
To do that, add background-size: cover
like so: 为此,请添加
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;
}
For more information on background-size
, see its article on MDN . 有关
background-size
更多信息,请参见其有关MDN的文章 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.