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

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

对于一个实例。你有

<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，因为在进行跨浏览器测试时，它将影响很多事情。

希望这可以帮助 ：）

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

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

只需添加到 div

style="overflow:hidden;"

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

请享用！

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

你可以做这样的事情

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

如果它是单个预定的背景图像，并且您希望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大小，或用JS加载图像，读取其属性，然后设置DIV大小。

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

有一个纯CSS解决方案，其他答案都没有。

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

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

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

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

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

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

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

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

如果您需要div自动调整图像，我可能会问为什么您不只是<img>在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>