我如何让一个div自动调整到背景的大小，我为它没有设置一个特定的高度(或最低高度)?
当前回答
这招对我很管用:
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%;
其他回答
我看了一些解决方案，它们都很棒，但我觉得我找到了一个非常简单的方法。
首先，我们需要从背景图像中获取比例。我们简单地将一个维度划分为另一个维度。然后是66.4%
当我们有图像比率时，我们可以简单地计算div的高度，将比率乘以视口宽度:
height: calc(0.664 * 100vw);
对我来说，它工作，正确设置div高度，并在窗口调整大小时更改它。
我已经处理这个问题有一段时间了，决定写一个jquery插件来解决这个问题。 这个插件会找到所有带有“show-bg”类的元素(或者你可以传递给它你自己的选择器)，并计算它们的背景图像尺寸。 您所要做的就是包含这段代码，用class="show "标记所需的元素
享受吧!
https://bitbucket.org/tomeralmog/jquery.heightfrombg
我会做相反的事情，将图像放在主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>
没有办法使用CSS自动调整背景图像大小。
正如其他人所提到的，您可以通过测量服务器上的背景图像，然后将这些属性应用到div来解决这个问题。
你也可以修改一些javascript来根据图片大小调整div的大小(一旦图片已经下载)——这基本上是一样的事情。
如果你需要你的div自动适应图像，我可能会问你为什么不放一个<img>标签在你的div?
最近引入的CSS纵横比属性(~2020-2021)是一个很好的方法来做到这一点，没有填充黑客，并支持所有常绿浏览器。
因为我们需要提前知道图像的纵横比，在很多情况下，你可以提前预先确定图像的尺寸比(但并不总是用户生成的内容)，你可以硬编码一个单一的风格或内联css在必要的时候。
当宽度指定时，基于提供的比率(如果高度指定，则计算宽度)，Aspect-ratio将计算高度。
div { 纵横比:3 / 2;/*公共比例，如800*600px图像*/ 宽度:200 px;/*计算的高度将是133.33px，这是宽度/纵横比*/ 背景:红色;/*因此任何图像出血显示*/ 背景图片:url (https://images.unsplash.com/photo - 1631163190830 - 8770 - a0ad4aa9?ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8&ixlib=rb 1.2.1&auto=format&fit=crop&w=200&q=80”); ｝ < div > < / div >
