如何让div高度自动调整到背景大小？

Question

如何在不设置特定高度(或最小高度)的情况下让div自动调整为我为其设置的背景大小？

Answer 1

有一种非常好的和很酷的方法可以使背景图像像img元素一样工作,因此它会height自动调整.你需要知道图像width和height比例.将height容器的容器设置为0,并padding-top根据图像比率设置百分比.

它将如下所示:

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

你刚刚得到一个具有自动高度的背景图像,就像img元素一样.这是一个工作原型(你可以调整大小并检查div高度):http://jsfiddle.net/TPEFn/2/

Answer 2

另一种可能效率低下的解决方案是将图像包含在img元素集下visibility: hidden;.然后使background-image周围的div与图像相同.

这会将周围的div设置为img元素中图像的大小,但将其显示为背景.

<div style="background-image: url(http://your-image.jpg);">
 <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>

Answer 3

无法使用CSS自动调整背景图像大小.

您可以通过测量服务器上的背景图像然后将这些属性应用于div来破解它,正如其他人所提到的那样.

您还可以根据图像大小(一旦图像下载后)修改一些javascript以调整div的大小 - 这基本上是相同的.

如果你需要你的div来自动调整图像,我可能会问你为什么不在你<img>的div里放一个标签？

Answer 4

这个答案与其他答案类似,但对大多数应用程序来说总体上是最好的.你需要事先了解手头的图像尺寸.这将允许您添加叠加文本,标题等,没有负片填充或图像的绝对定位.它们的关键是设置填充%以匹配图像宽高比,如下例所示.我使用了这个答案,基本上只是添加了一个图像背景.

.wrapper {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  background-size: contain;
  background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
  margin: 0 auto;
}
.wrapper:after {
  padding-top: 75%;
  /* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: black;
  text-align: center;
  margin-top: 5%;
}

<div class="wrapper">
  <div class="main">
    This is where your overlay content goes, titles, text, buttons, etc.
  </div>
</div>

Answer 5

也许这可以提供帮助,但这不是一个背景,但你明白了:

<style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
    <div>Hi there</div>
</div>

Answer 6

我查看了一些解决方案，它们很棒，但我认为我找到了一种非常简单的方法。

首先，我们需要从背景图像中获取比例。我们只是将一个维度划分为另一个维度。然后我们得到例如 66.4%

当我们有图像比率时，我们可以简单地通过将比率乘以视口宽度来计算 div 的高度：

height: calc(0.664 * 100vw);

对我来说，它可以工作，正确设置 div 高度并在调整窗口大小时更改它。

Answer 7

最近引入的 CSSaspect-ratio属性(~2020-2021) 是一种无需填充黑客即可实现此目的的好方法，并且所有常青浏览器都支持。

由于我们需要提前知道图像的长宽比，并且在许多用例中，您将能够提前预先确定图像尺寸比（但并不总是针对用户生成的内容），因此您可以对单一样式进行硬编码或在必要时内联 css。

aspect-ratio当指定宽度时，将根据提供的比率计算高度（如果指定了高度，则计算宽度）。

div {
    /*common ratio, like an 800*600px image */
    aspect-ratio: 3 / 2;
    /* computed height will be 133.33px, which is width/aspect-ratio */
    width: 200px;
    /* red BG for debugging so any image bleed is shown*/
    background: red; 
    background-image: url('https://images.unsplash.com/photo-1631163190830-8770a0ad4aa9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80');
}

<div></div>

Answer 8

很确定这一直都不会在这里看到.但如果您的问题与我的问题相同,那么这就是我的解决方案:

.imaged-container{
  background-image:url('<%= asset_path("landing-page.png") %> ');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 65vw;
}

我想在图像的中心有一个div,这将允许我这样做.

Answer 9

有一个纯CSS解决方案,其他答案已错过.

"content:"属性主要用于将文本内容插入元素,但也可用于插入图像内容.

.my-div:before {
    content: url("image.png");
}

这将导致div将其高度调整为图像的实际像素大小.要调整宽度,请添加:

.my-div {
    display: inline-block;
}

Answer 10

您可以在服务器端执行:通过测量图像然后设置div大小,或者使用JS加载图像,读取它的属性然后设置DIV大小.

这是一个想法,将相同的图像作为IMG标记放在div中,但是给它可见性:隐藏+使用位置相对来玩+给这个div作为背景图像.

Answer 11

我有这个问题并找到了Hasanavi的答案,但是我在宽屏幕上显示背景图像时遇到了一个小错误 - 背景图像没有扩散到整个屏幕宽度.

所以这是我的解决方案 - 基于Hasanavi的代码,但更好......这应该适用于超宽屏和移动屏幕.

/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) { 
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

您可能已经注意到,该background-size: contain;属性不适合超宽屏幕,并且该background-size: cover;属性不适合移动屏幕,因此我使用此@media属性来调整屏幕大小并解决此问题.