在屏幕分辨率上拟合图像大小

时间:2013-04-04 10:05:10

标签: css html background width

我有一个像

这样的div标签
<div id="MainMenu1" dojotype="dijit.layout.ContentPane"></div>

此div与css相关联,如

#MainMenu1 
{
height:53px;
background: url(../images/top_banner.png) no-repeat;
background-position:center;
margin:auto;
width:100%;
border:0;
}

我看到背景图像在较小的屏幕上很好,但在更宽的屏幕上,它只占据中心位置。我希望图像即使在更宽的屏幕上也能占据整个屏幕,我不希望图像重复&#34;重复&#34;。 我该怎么做?

2 个答案:

答案 0 :(得分:1)

#MainMenu1 
{
height:53px;
margin:auto;
width:100%;
border:0;
background: url(../images/top_banner.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

试试这个。它对我来说很完美。它应该完全适合中心的背景,并合理地将其拉伸到网站正在查看的任何屏幕尺寸。

答案 1 :(得分:0)

您可以让图像重复意味着它覆盖整个空间,或者使用background-size: cover缩放它以覆盖整个区域,同时保持图像的原始宽高比。