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

Question

我有一个带有背景图像的 div，我想将其扩展 100% 宽度并自动缩放 div 以适应图像所需的高度。目前它不会缩放 div 高度，除非我将 div 的高度设置为 100%，但它只是拉伸(stretch)到屏幕的整个高度，而我希望它缩放到图像的高度。

这是 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; }

感谢所有的帮助

Answer 1

让透明图像决定 DIV 尺寸。
在那个 div 中放置相同的图像和 CSS opacity: 0

<div id="mainHeaderWrapper">
   <img src="path/to/image.jpg"><!-- I'm invisible! -->
</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 的高度将由包含的不可见图像决定，并将 background-image 设置为 center, full (50%/100%) 它将匹配该图像的比例。

需要在该 DIV 中添加一些内容吗？

由于包含图像，您将需要一个额外的子元素，该元素将被设置为 position: absolute 充当叠加元素

<div id="mainHeaderWrapper">
   <img src="path/to/image.jpg"><!-- I'm invisible! -->
   <div>Some content...</div>
</div>

#mainHeaderWrapper{
    position: relative;
    background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper > img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}
#mainHeaderWrapper > div{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}