css - 如何让 div 高度自动调整为背景大小？

Question

如何让 div 自动调整到我为其设置的背景大小而不为其设置特定高度（或最小高度）？

score 616 · Accepted Answer

有一种很好很酷的方法可以让背景图像像一个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/8m9ur5qj/

score 287 · Accepted Answer

另一个可能效率低下的解决方案是将图像包含在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>

score 36 · Accepted Answer

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

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

您还可以破解一些 javascript 来根据图像大小调整 div 的大小（一旦下载了图像） - 这基本上是同一件事。

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

score 25 · Accepted Answer

这个答案与其他答案相似，但总体上对于大多数应用程序来说是最好的。您需要事先知道图像大小，这与您通常做的一样。这将允许您添加覆盖文本、标题等，而无需图像的负填充或绝对定位。他们的关键是设置填充百分比以匹配图像纵横比，如下例所示。我使用了这个答案，基本上只是添加了一个图像背景。

.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>

score 16 · Accepted Answer

也许这会有所帮助，它不完全是背景，但你明白了：

<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>

score 16 · Accepted Answer

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

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

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

height: calc(0.664 * 100vw);

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

score 14 · Accepted Answer

很确定这将永远不会在这里看到。但如果你的问题和我的一样，这就是我的解决方案：

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

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

score 11 · Accepted Answer

有一个其他答案错过的纯 CSS 解决方案。

“content:”属性主要用于向元素中插入文本内容，但也可用于插入图像内容。

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

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

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

score 6 · Accepted Answer

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

这里有一个想法，将相同的图像放在 div 中作为 IMG 标签，但赋予它可见性：隐藏 + 使用相对位置播放 + 给这个 div 图像作为背景。

score 6 · Accepted Answer

我遇到了这个问题并找到了 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属性来调整屏幕尺寸并修复此问题。

score 4 · Accepted Answer

最近引入的 CSSaspect-ratio属性（~2020-2021）是一种无需填充黑客的好方法，并且在所有常青浏览器上都受支持。

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

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

div {
    aspect-ratio: 3 / 2; /*common ratio, like an 800*600px image */

    width: 200px; /* computed height will be 133.33px, which is width/aspect-ratio */
    background: red; /* so any image bleed is shown*/
    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>

score 3 · Accepted Answer

如果它是单个预定的背景图像，并且您希望 div 在不扭曲背景图像的纵横比的情况下做出响应，您可以首先计算图像的纵横比，然后通过执行以下操作创建一个保留其纵横比的 div ：

假设你想要一个 4/1 的纵横比并且 div 的宽度是 32%：

div {
  width: 32%; 
  padding-bottom: 8%; 
}

这是因为填充是根据包含元素的宽度计算的。

score 3 · Accepted Answer

这对我有用：

background-image: url("/assets/image_complete_path");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
height: 100%;

score 2 · Accepted Answer

这个怎么样：）

.fixed-centered-covers-entire-page{
    margin:auto;
    background-image: url('https://i.imgur.com/Ljd0YBi.jpg');
    background-repeat: no-repeat;background-size:cover;
    background-position: 50%;
    background-color: #fff;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:-1;
    position:fixed;
}

<div class="fixed-centered-covers-entire-page"></div>

演示：http: //jsfiddle.net/josephmcasey/KhPaF/

score 2 · Accepted Answer

我会做相反的事情并将图像放在主 div 内，宽度为 100%，这将使 div 和图像都响应屏幕尺寸，

然后在主 div 内的宽度和高度为 100% 的绝对定位 div 中添加内容。

<div class="main" style="position: relative; width: 100%;">
    <img src="your_image.png" style="width: 100%;">
    <div style="position: absolute; width: 100%; height: 100%; display: flex...">
            YOUR CONTENT
    </div>
</div>

score 2 · Accepted Answer

添加到原始接受的答案只需添加样式宽度：100%; 到内部图像，因此它将为移动设备自动缩小/扩展，并且最终不会在移动视图中占据较大的顶部或底部边距。

<div style="background-image: url(http://your-image.jpg);background-position:center;background-repeat:no-repeat;background-size: contain;height: auto;">
 <img src="http://your-image.jpg" style="visibility: hidden; width: 100%;" />
</div>

score 1 · Accepted Answer

可能这会有所帮助，它不完全是背景，但你明白了

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

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

<div>
    <img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
    <div>Hello</div>
</div>

score 1 · Accepted Answer

你可以做这样的事情

<div style="background-image: url(http://your-image.jpg); position:relative;">
 <img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>

score 1 · Accepted Answer

如果您在构建时知道图像的比例，想要基于窗口高度的高度并且您可以针对现代浏览器（IE9+），那么您可以为此使用视口单位：

.width-ratio-of-height {
  overflow-x: scroll;
  height: 100vh;
  width: 500vh; /* width here is 5x height */
  background-image: url("http://placehold.it/5000x1000");
  background-size: cover;
}

不完全是 OP 的要求，但可能非常适合许多查看此问题的人，因此想在这里提供另一种选择。

小提琴：https ://jsfiddle.net/6Lkzdnge/

score 1 · Accepted Answer

假设你有这样的事情：

<div class="content">
    ... // inner HTML
</div>

并且您想为其添加背景，但您不知道图像的尺寸。

我有一个类似的问题，我通过使用网格解决了它：

HTML

<div class="outer">
    <div class="content">
        ... // inner HTML
    </div>
    <img class="background" />
</div>

CSS

.outer{
    display: grid;
    grid-template: auto / auto;
    // or you can assign a name for this block
}
.content{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
}
.background{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
}

z-index只是为了将图像实际放置在背景中，您当然可以放置img.background在div.content.

注意：它可能会导致div.content图片具有相同的高度，因此如果div.content有任何根据其高度放置的孩子，您可能需要设置一个数字，而不是像“自动”这样的数字。

score 1 · Accepted Answer

受最喜欢的答案的启发，我最终想出了一个使用 min-height 和 'vw' 单位的解决方案

我的图像比例非常不寻常

通过实验我最终使用

    min-height: 36vw;

该值必须根据您的图像比例发生变化

我的实际页面使用的 css 代码：

    background:url('your-background-image-adress') center center no-repeat;
    background-size: 100%;
    background-position: top center;
    margin-top: 50px;
    width: 100%;
    min-height: 36vw;

代码笔示例https://codepen.io/viniciusrad/pen/GRNPXoL

score 0 · Accepted Answer

Umbraco CMS 有这个问题，在这种情况下，您可以使用类似这样的 div 的“样式”属性将图像添加到 div：

style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"

score 0 · Accepted Answer

我一直在处理这个问题，并决定编写一个 jquery 插件来解决这个问题。这个插件将找到所有具有“show-bg”类的元素（或者你可以传递你自己的选择器）并计算它们的背景图像尺寸。您所要做的就是包含此代码，用 class="show 标记所需的元素

享受！

https://bitbucket.org/tomeralmog/jquery.heightfrombg

score 0 · Accepted Answer

我能想到的最佳解决方案是以百分比指定宽度和高度。这将允许您根据显示器尺寸调整屏幕大小。它更多的是响应式布局..

例如。你有

<br/>
<div> . //This you set the width percent to %100
    <div> //This you set the width percent to any amount . if you put it by 50% , it will be half
    </div>
 </div>

如果您想要响应式布局，这是最好的选择，我不推荐 float ，在某些情况下可以使用 float 。但在大多数情况下，我们避免使用浮点数，因为当您进行跨浏览器测试时，它会影响很多事情。

希望这可以帮助：）

score -2 · Accepted Answer

如果你可以在Photoshop上制作一个主层不透明度为1左右并且基本上是透明的图像，把那个img放在div中，然后将真实的图片作为背景图像。然后将 img 的不透明度设置为 1 并添加所需的尺寸。

那张照片就是这样完成的，你甚至不能将不可见的图像拖出页面，这很酷。

score -2 · Accepted Answer

实际上，当您知道如何操作时，这很容易：

<section data-speed='.618' data-type='background' style='background: url(someUrl) 
top center no-repeat fixed;  width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>

诀窍就是将封闭的 div 设置为普通 div，其尺寸值与背景尺寸值相同（在本例中为 100% 和 40vw）。

score -2 · Accepted Answer

我使用 jQuery 解决了这个问题。在新的 CSS 规则本身允许这种类型的行为之前，我发现这是最好的方法。

设置你的 div

下面是您希望背景出现的 div（“hero”），然后是您想要覆盖在背景图像之上的内部内容/文本（“inner”）。您可以（并且应该）将内联样式移动到您的英雄类。我将它们留在这里，以便快速轻松地查看应用了哪些样式。

<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
    <div class="inner">overlay content</div>
</div>

计算图像纵横比

接下来通过将图像的高度除以宽度来计算图像的纵横比。例如，如果您的图像高度为 660，宽度为 1280，则您的纵横比为 0.5156。

设置一个 jQuery 窗口调整大小事件来调整高度

最后，添加一个用于调整窗口大小的 jQuery 事件侦听器，然后根据纵横比计算英雄 div 的高度并更新它。由于使用纵横比的计算不完善，此解决方案通常会在底部留下一个额外的像素，因此我们将 -1 添加到结果大小。

$(window).on("resize", function ()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

确保它适用于页面加载

您应该在页面加载时执行上面的调整大小调用，以便在一开始就计算图像大小。如果你不这样做，那么在你调整窗口大小之前，英雄 div 不会调整。我设置了一个单独的函数来进行调整大小调整。这是我使用的完整代码。

function updateHeroDiv()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

$(document).ready(function() 
{       
    // calls the function on page load
    updateHeroDiv(); 

    // calls the function on window resize
    $(window).on("resize", function ()
    {
        updateHeroDiv();        
    }
});

score -4 · Accepted Answer

-4

只需添加到div

style="overflow:hidden;"

于 2013-06-26T03:33:38.883 回答

css - 如何让 div 高度自动调整为背景大小？

28 回答 28

Related

Reference