缩放div以适应背景图像 [英] Scale div to fit background image

问题描述

我有一个带背景图片的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）; 
宽度：100％; 
 height：auto; 
 -webkit-background-size：cover; 
 -moz-background-size：cover; 
 -o-background-size：cover; 
 background-size：cover; 
背景大小：100％100％; 
 
背景重复：不重复; 
 background-position：center center; 
 
} 
 
 .clear {clear：both; } 
  

非常感谢您的帮助

解决方案

让透明图片指定您的 DIV 尺寸。

jsBin演示

里面的那个div放了相同的图片

 < div id = mainHeaderWrapper > 
< img src =path / to / image.jpg><！ - 我无形！ ！yey  - > 
< / div> 
  

将图片设置为

  #mainHeaderWrapper {
 background：no-repeat url（path / to / image.jpg）50％/ 100％; 
} 
 #mainHeaderWrapper img {
 vertical-align：top; 
宽度：100％; / *最大宽度* / 
不透明度：0; / *让它透明* / 
} 
  

这样DIV的高度将会是由包含不可见图像支配，

将 background-image 设置为 center，full （ 50％/ 100％）它会匹配该图片的比例。

不确定是否要操作或什么（使用CSS3 过滤器 code>），但现在再次阅读我写的内容...

简单地将图像放入DIV中并不简单吗？ ：）



需要该DIV内的内容吗？





< a href =http://jsbin.com/nurelu/3/edit =nofollow noreferrer> jsBin demo 由于包含图片，您需要一个额外的子元素将被设置为 position：绝对
并充当叠加元素

 < div id =mainHeaderWrapper> 
< img src =path / to / image.jpg><！ - 我无形！ ！yey  - > 
< div> 
某些内容... 
< / div> 
< / div> 
  

 ＃ mainHeaderWrapper {
 position：relative; 
背景：无重复网址（path / to / image.jpg）50％/ 100％; 
} 
 #mainHeaderWrapper> img {
 vertical-align：top; 
宽度：100％; / *最大宽度* / 
不透明度：0; / *让它透明* / 
} 
 #mainHeaderWrapper> div {
 position：absolute; 
 top：0; 
宽度：100％; 
身高：100％; 
} 
  

I have a div with a background image that I want to expand 100% width and auto scale the div to fit the required height of the image. At the moment it is not scaling the div height unless I set the height of the div to 100% but then it just stretches to the full height of the screen, whereas I want it to scale to the height of the image.

Here is the html:

<div id="mainHeaderWrapper">


</div><!--end mainHeaderWrapper-->
<br class="clear" />;

Here is the 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; }

Thanks for any and all help

解决方案

Let a transparent image dictate your DIV dimensions.

jsBin demo

Inside that div put the same image

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

set that image to

#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 */
}

That way the height of the DIV will be dictated by the containing invisible image,
Having the background-image set to center, full (50% / 100%) it will match that image's proportions.

Not sure if you want to manipulate the colors of the background-image or what (using CSS3 filter), but now after reading again what I wrote...
Isn't it simpler to simply put an image inside a DIV? :)

Need some content inside that DIV?

jsBin demo Due to the containing image, you'll need an extra child element that will be set to position:absolute and act as an overlay element

<div id="mainHeaderWrapper">
   <img src="path/to/image.jpg"><!-- I'm invisible! yey!-->
   <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%;
}

这篇关于缩放div以适应背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！