css - 跨屏幕分辨率拟合图像大小

Question

我有一个 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;
}

我看到背景图像在较小的屏幕上很好，但在较宽的屏幕上，它只占据中心位置。我希望图像即使在更宽的屏幕上也能占据整个屏幕，并且我不希望图像“重复”。我该怎么做？

Answer 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;
}

尝试这个。它非常适合我。它应该在中心完美地适合背景，并合理地将其拉伸到正在查看网站的任何屏幕尺寸。

Answer 2

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