将div按比例缩放以适应背景图像

Question

我有一个带有背景图片的div，我想让它以100%的宽度自动缩放以适应图像所需的高度。目前，除非我将div的高度设置为100%，否则它不会缩放div的高度，但这样它只会伸展到屏幕的完整高度，而我想要的是它根据图像的高度进行缩放。

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

感谢任何和所有的帮助

- Al Hennessey

---

在该<div>中放置一个<img>怎么样？ - Mr Lister

我会尝试，但是通过CSS背景不可能实现我想要的效果吗？ - Al Hennessey

你想让宽度占据浏览器窗口的100％，但高度限制为图片的高度？图片的比例是已知/一致的吗？ - showdev

不，使用CSS无法动态设置div大小以使用相同尺寸的背景图像。您需要将背景图像作为自己的图像元素插入，或者使用Javascript计算图像的尺寸并将其应用于div。 - APAD1

听起来你想让div成为一个显示图片的容器，对吗？如果是这样，使用img标签。 - Mr Lister

@MrLister 即使图像不是页面内容的一部分，如果它是一个设计元素呢？ - Chazy Chaz

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%;
}

- Roko C. Buljan

---

谢谢，我在想如何将内容添加到那个div中，所以你的回答的第二部分帮助很大。 - Al Hennessey

第二部分真是太棒了！ - Hritik

它确实有效，但在响应式网站方面可能会遇到问题。 - deLegend

Answer 2

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

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

根据盒模型 (w3.org)：

即使对于'padding-top'和'padding-bottom'，百分比也是相对于生成的框的包含块的宽度计算的。

下面的图片大小为400px X 200px，因此高度与宽度的比例为1:2，并且padding-top设置为50%；

#mainHeaderWrapper {
  width: 100%;
  height: 0;
  padding-top: 50%;
  background-image: url('https://dummyimage.com/400x200/');
  background-size: 100% auto;
  background-repeat: no-repeat;
}

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

在另一个例子中，图片的尺寸为300px X 100px。高度是宽度的三分之一，因此 padding-top 被设置为33.33%：

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

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

---

编辑：

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

#mainHeaderWrapper {
  width: 100%;
  height: 0;
  padding-top: 33.33%;
  background-image: url('https://dummyimage.com/300x100/');
  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;
}

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

- showdev

Answer 3

这可以不使用虚拟图像来实现。我以刚处理的图片尺寸为例。

我的图片尺寸是2880x1410。简化尺寸->96/47（我使用了一个简单的比例计算器http://andrew.hedges.name/experiments/aspect_ratio/）。一旦你得到简化的比例，把高度和宽度代入以下公式：

height: calc((100vw * W) / H); 因此我的代码就是：height: calc((100vw * 47) / 96);

除非内容不适合，否则无需担心div的内容。

- dudeastronaut

---

这对我来说看起来很好用。我很惊讶它没有更多的赞，因为它比上面的解决方案更清晰、更简单，并且在容器内有内容时也能正常工作，而不仅仅是在空的情况下。 - Brady Dowling

height: calc((100vh * W) / H); 对我有用，我将 vw 改为了 vh。感谢您提供的解决方案。 - palatok

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>

- bilu sau