我有一个带有背景图像的 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; }
感谢所有的帮助
最佳答案
让透明图像决定 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%;
}
关于html - 缩放 div 以适合背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30035530/