我有一个背景图像的div,我想扩展100％的宽度,并自动缩放div,以适应所需的图像高度.目前它没有缩放div高度,除非我将div的高度设置为100％,但是它只是延伸到屏幕的整个高度,而我希望它可以缩放到图像的高度.
这是html：
<div id="mainHeaderWrapper"> </div><!--end mainHeaderWrapper--> <br class="clear" />;
这是css：
#mainHeaderWrapper{
background: url(http://localhost/site/gallery/bg1.jpg);
width: 100%;
height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
.clear { clear: both; }
感谢任何和所有的帮助
解决方法
让透明图像规定您的DIV维度.
在那个div里面放上了相同的图像
<div id="mainHeaderWrapper"> <img src="path/to/image.jpg"><!-- I'm invisible! yey!--> </div>
将该图像设置为
#mainHeaderWrapper{
background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper img{
vertical-align: top;
width: 100%; /* max width */
opacity: 0; /* make it transparent */
}
这样,DIV的高度将由包含的无形图像决定,
将背景图像设置为中心,满(50％/ 100％)将匹配该图像的比例.
不知道如果你想操纵colors of the background-image或什么(使用CSS3过滤器),但现在再次阅读我写的…
简单地将图像放在DIV中不是更简单吗？
