Question

我有一个带有背景图像的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; }

感谢您提供的任何帮助

Answer 1

让透明图像决定您的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的高度将由包含不可见图像决定，
将background-image设置为居中，完整（50% / 100%）后，它将匹配该图片的比例。

不确定是否要操纵colors of the background-image或什么（使用CSS3 filter），但现在再次阅读我写的内容...
简单地将图像放入DIV内是不是更简单？：）

在DIV中需要一些内容吗？

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

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

Answer 2

如果您知道图像的比例，请使用百分比填充来定义容器的高度。设置height:0并将垂直填充设置为宽度的百分比。

这种方法的关键是基于百分比的垂直填充始终与宽度相关。

根据box model (w3.org)：

百分比是根据宽度计算的生成的框包含块，即使是填充顶部＆＃39;和＆＃39;填充底＆＃39;

下图，图像为400px X 200px，因此高宽比为1：2，padding-top设为50％;

＆＃13;

#mainHeaderWrapper {
  width: 100%;
  height: 0;
  padding-top:50%;
  background-image: url(//lorempixel.com/400/200/abstract/1/);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

＆＃13;

<div id="mainHeaderWrapper"></div>
stuff below the image

＆＃13;

在另一个示例中，图像是300px X 100px。高度是宽度的1/3，因此padding-top设置为33.33％：

＆＃13;

#mainHeaderWrapper {
  width: 100%;
  height: 0;
  padding-top:33.33%;
  background-image: url(//lorempixel.com/300/100/abstract/1/);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

＆＃13;

<div id="mainHeaderWrapper"></div>
stuff below the image

＆＃13;

编辑：

根据Paulie_D的提示，div中的其他内容必须绝对定位，如下所示。我建议使用百分比来定位这些元素。

＆＃13;

#mainHeaderWrapper {
  width: 100%;
  height: 0;
  padding-top: 33.33%;
  background-image: url(//lorempixel.com/300/100/abstract/1/);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
div#inner_content {
  position: absolute;
  top:0;
  width:100%;
  margin-top:10%;
  color: #FFF;
  text-align: center;
  font-size:20px;
}

＆＃13;

<div id="mainHeaderWrapper">
  <div id="inner_content">Hello World</div>
</div>
stuff below the image

＆＃13;

Answer 3

这可以在不使用虚拟图像的情况下完成。我将使用我刚刚使用过的图像的尺寸。

我的图片尺寸为2880x1410。简化尺寸 - ＆gt; 96/47（我使用了这个简单的比率计算器http://andrew.hedges.name/experiments/aspect_ratio/）。获得简化比率后，将高度和宽度插入等式：

高度：calc（（100vw * W）/ H）; 所以我的阅读：高度：计算（（100vw * 47）/ 96）;

无需担心div的内容（除非它们不合适）

Answer 4

body{ margin: 0; padding: 0}

#box1{
background: url(http://lorempixel.com/400/200/food/);
background-size: cover; 
background-attachment: fixed; 
margin: 0; 
width: 100%; 
height: 100vh; 
display: table;
}
h1{ color: #ffffff; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size: 38px; text-align: center; font-weight: normal; background: rgba(0,0,0,0.3); display: table-cell; vertical-align: middle}

<div id="box1">
		<h1>Code Bluster BILU </h1>
	</div>

缩放div以适合背景图像

4 个答案:

在DIV中需要一些内容吗？

编辑：