html – 缩放div以适合背景图像

概述我有一个背景图像的div,我想扩展100％的宽度,并自动缩放div,以适应所需的图像高度.目前它没有缩放div高度,除非我将div的高度设置为100％,但是它只是延伸到屏幕的整个高度,而我希望它可以缩放到图像的高度. 这是html： <div id="mainHeaderWrapper"></div><!--end mainHeaderWrapper--><br class="clear" 我有一个背景图像的div,我想扩展100％的宽度,并自动缩放div,以适应所需的图像高度.目前它没有缩放div高度,除非我将div的高度设置为100％,但是它只是延伸到屏幕的整个高度,而我希望它可以缩放到图像的高度.

这是HTML：

<div ID="mainheaderWrapper"></div><!--end mainheaderWrapper--><br  />;

这是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维度.

jsBin demo

在那个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中不是更简单吗？ 总结

以上是内存溢出为你收集整理的html – 缩放div以适合背景图像全部内容，希望文章能够帮你解决html – 缩放div以适合背景图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。