如何将 div 高度设置为自动调整到背景大小？

在开发网页时，我们常常需要在页面中使用 div 元素来包含其他元素。有时候我们需要让 div 的高度自动调整到其内部元素的尺寸，最常见的就是让 div 的背景色或者背景图铺满整个 div 区域。那么该如何实现呢？

方法一：使用 padding-bottom 技巧

我们可以使用 padding-bottom 属性来实现这个效果。我们可以在 div 元素中添加一个伪元素 :after，同时设置 padding-bottom 的值为 100%，然后通过设置 div 元素的 position 和 :after 伪元素的 position 和 height 来把 div 元素的高度调整到和宽度等比例缩放后的值一样。

div {
    position: relative;
}
div:after {
    content: "";
    display: block;
    padding-bottom: 100%;
    position: relative;
}

这样做的原理是，当我们设置 padding-bottom 的值为百分比时，它是相对于父元素的宽度计算的。所以我们设置 padding-bottom 为 100%，相当于让 padding-bottom 的值和 div 元素的宽度相等。然后我们使用 :after 伪元素来占据 div 元素中的一个空间，并设置其 position 为 relative，使其高度根据 div 元素的宽度等比例缩放。最后我们设置 div 元素的 position 为 relative，使其可以和 :after 伪元素重叠，从而实现高度自适应的效果。

方法二：使用 background-size 技巧

我们还可以使用 background-size 属性来实现这个效果。与方法一类似，我们需要在 div 元素中添加一个伪元素 :after，然后设置 background-size 的值为 cover 或者 contain，这样就可以让背景图片等比例缩放并铺满整个 div 元素区域。然后我们通过设置 div 元素的 position 和 :after 伪元素的 position 和 content 来让 div 元素的高度自适应。

div {
    position: relative;
    background-image: url(路径/图片名);
    background-repeat: no-repeat;
    background-position: center center;
}
div:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

这样做的原理是，当我们设置 background-size 的值为 cover 或者 contain 时，背景图片会等比例缩放并铺满整个 div 元素区域。然后我们使用 :after 伪元素来占据 div 元素中的一个空间，并设置其 padding-bottom 的值为 100%，使其高度也等比例缩放。最后我们通过设置 div 元素的 position 和 :after 伪元素的 position 和 content，来让 div 元素的高度自适应。