如何在Div宽度设为100%后，让Div高度自动匹配背景图等比缩放后的高度？

嘿，我完全懂你的困扰！之前我也踩过这个坑——空div加上背景图后，设置height:auto根本达不到预期效果，因为背景图只是视觉层面的装饰，不会影响元素的盒模型高度，空div的高度默认就是0，所以才会出现高度不对的情况。

别担心，有两个超实用的纯CSS方案，能完美实现你要的“宽度100%时，高度自动匹配背景图等比缩放后高度”的需求：

方法一：利用padding-top的百分比特性（推荐） #

这是最常用的固定宽高比技巧，核心原理是：CSS中垂直方向的padding百分比值，是基于父元素的宽度来计算的，刚好能帮我们维持固定的宽高比。

步骤： #

1. 先算好你的背景图宽高比：你的图是2000px宽、400px高，用高度除以宽度得到比例：400 ÷ 2000 = 0.2，也就是20%。
2. 给div设置height: 0（因为我们要靠padding撑开高度，避免空元素的默认高度干扰），再加上padding-top: 20%，这样div的高度就会始终跟着宽度走，保持20%的比例。
3. 最后保留你原来的背景图相关属性就好。

代码示例： #

div {
  border: 1px solid red;
  width: 100%;
  height: 0; /* 用padding撑开高度，所以设为0 */
  padding-top: 20%; /* 维持2000:400的宽高比 */
  background-size: 100% auto; /* 背景图等比铺满宽度，高度自动适配 */
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('https://i.imgur.com/Ebu5rml.png');
}

这个方案的优点是纯CSS实现，不需要JS，响应式表现完美，而且性能拉满。

方法二：用隐藏的内联img元素撑高div #

如果你不想手动计算宽高比（比如以后可能换不同比例的图），可以用这个方法：用一张隐藏的img标签加载同一张背景图，利用img本身的等比缩放特性来撑开div的高度，背景图再覆盖在上面。

步骤： #

1. 在div内部加一个img标签，src和背景图的url一致。
2. 给img设置width: 100%和height: auto，让它自动等比缩放，再用visibility: hidden把它隐藏（但保留占位空间）。
3. div的样式保留你的背景图设置，记得给div加position: relative（如果需要在上面加其他内容的话，也方便用绝对定位）。

代码示例： #

HTML：

<div>
  <img src="https://i.imgur.com/Ebu5rml.png" alt="" />
</div>

CSS：

div {
  border: 1px solid red;
  width: 100%;
  position: relative;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('https://i.imgur.com/Ebu5rml.png');
}
div img {
  width: 100%;
  height: auto;
  visibility: hidden; /* 隐藏图片但保留占位 */
  display: block; /* 去掉img默认的底部行间距 */
}

这个方案的好处是不用计算比例，换图的时候只需要替换url就行，非常灵活。

总结一下：你之前的问题出在空div的height:auto不会被背景图撑高，这两个方案都是通过CSS的盒模型特性，主动给div设置了和背景图比例匹配的高度，自然就能实现等比缩放的效果啦～

内容来源于stack exchange