拟合图像尺寸

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个像拟合图像尺寸

<div id="MainMenu1" dojotype="dijit.layout.ContentPane"></div>

div标签这个div与CSS像

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

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

回答：

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

回答：

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

试试这个。它对我来说非常合适。它应该完美地适应中心的背景，并合理地将其延伸至网站正在浏览的任何屏幕大小。

以上是 拟合图像尺寸 的全部内容， 来源链接： utcz.com/qa/262818.html

回到顶部