如何获取div高度以自动调整为背景尺寸？

如何获得div以自动调整为其设置的背景大小，而无需为其设置特定的高度（或最小高度）？

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

有一种非常不错的方法，可以使背景图像像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/

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

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

您还可以修改一些JavaScript来根据图像大小调整div的大小（一旦下载了图像）-这基本上是相同的。

如果您需要div自动调整图像，我可能会问为什么您不只是<img>在div内放置标签？

这个答案与其他答案相似，但是对于大多数应用程序而言，总体而言是最佳的。您通常需要先掌握图像大小。这样，您就可以添加叠加文字，标题等，而不会出现负填充或图像的绝对位置。它们的关键是设置填充百分比以匹配图像长宽比，如下面的示例所示。我使用了这个答案，实际上只是添加了图像背景。

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

也许可以帮上忙，这不完全是背景，但您会明白：

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

可以肯定的是，这里永远不会出现这种情况。但是，如果您的问题与我的相同，这是我的解决方案：

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

我想在图像的中央有一个div，这将使我满意。

有一个纯CSS解决方案，其他答案都错过了。

“ content：”属性主要用于将文本内容插入到元素中，但是也可以用于插入图像内容。

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

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

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

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

这是一个想法，将与IMG标签相同的图像放在div内，但要使其具有可见性：隐藏+相对位置播放+将此div用作背景图像。

我遇到了这个问题，找到了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属性来处理屏幕尺寸并解决此问题。

这个怎么样 ：）

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

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

假设您希望宽高比为4/1，并且div的宽度为32％：

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

这是由于基于包含元素的宽度来计算填充而产生的。

也许可以帮上忙，这不完全是一个背景，但您会想到一个简单的主意

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

你可以做这样的事情

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

如果您知道生成时图像的比例，想要基于窗口高度的高度，并且可以使用现代浏览器（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/

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

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

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

height: calc(0.664 * 100vw);

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

假设您有这样的事情：

<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有任何根据其高度放置的子代，则可能需要设置一个数字，而不是“ auto”。

Umbraco CMS遇到了这个问题，在这种情况下，您可以使用以下内容将图片添加到div中，以作为div的'style'属性：

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

我已经处理了一段时间，并决定编写一个jquery插件来解决此问题。该插件将找到所有带有“ show-bg”类的元素（或者您可以将其传递给自己的选择器）并计算其背景图像尺寸。您所要做的就是包括以下代码，并用class =“ show”标记所需的元素

请享用！

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

我能想到的最好的解决方案是用百分比指定宽度和高度。这将使您可以根据显示器的大小调整屏幕大小。其更具响应性的布局。

对于一个实例。你有

<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。但是在大多数情况下，我们避免使用float，因为在进行跨浏览器测试时，它将影响很多事情。

希望这可以帮助 ：）

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

<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设置为具有与背景尺寸值相同的尺寸值（在此示例中为100％和40vw）的普通div。

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

设置div

在下面，您要使div出现在背景上（“英雄”），然后是要叠加在背景图像上方的内部内容/文本（“ 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);
}

确保它在页面加载时有效

当页面加载时，您应该在上面执行resize调用，以便一开始就计算出图像尺寸。如果您不这样做，则在调整窗口大小之前，hero 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();        
    }
});

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

那张照片是用这种方式完成的，您甚至无法将不可见的图像拖出很酷的页面。

只需添加到 div

style="overflow:hidden;"