如何让Flexbox容器高度随宽度按固定比例动态响应？

我来帮你搞定这个问题！要让卡片容器的高度跟着宽度按固定比例自适应，用CSS的padding百分比技巧就能完美解决，这是实现固定宽高比容器的经典方案，完全不需要JavaScript。

核心原理 #

CSS中，padding-top/padding-bottom的百分比值是基于元素的宽度计算的。利用这一点，我们可以给卡片设置一个对应图片宽高比的padding值，让高度自动跟随宽度缩放，完美维持比例。

你的图片宽高比是148px（宽）:375px（高），计算下来比例为 375 ÷ 148 ≈ 2.5338，也就是253.38%。接下来我们调整代码：

修改后的完整代码 #

HTML（无需修改）

<div class="container">
  <div class="card">
    <div class="t">
      <div class="tl"></div>
      <div class="tr">Servant</div>
    </div>
    <div class="mc">c</div>
    <div class="bc">g</div>
  </div>
  <!-- 其余卡片代码省略 -->
</div>

CSS（关键修改部分已标注）

.container {
  width: 80%;
  margin: 1rem auto;
  background: #f0f0f0;
  /* 移除固定min-height，让容器自适应 */
  padding: 0.1rem;
  border-radius: 0.1rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* 修正原错误属性，确保卡片换行 */
}
.card {
  flex: 1 1 auto;
  margin: 0.2rem;
  max-width: 148px;
  position: relative; /* 为内部绝对定位元素提供参考 */
  padding-top: 253.38%; /* 核心：按宽高比计算的padding值，撑开高度 */
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, 1);
  font-family: "Segoe UI";
}
/* 用伪元素承载背景图，占满整个卡片容器 */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://i.imgur.com/q8WyDB6.png") no-repeat;
  background-size: 100% 100%;
  z-index: -1; /* 把背景图放在内容下方 */
}
/* 所有内部元素设置绝对定位，避免被padding挤开 */
.t, .mc, .bc {
  position: absolute;
  left: 0;
  right: 0;
}
.t {
  top: 0;
  display: flex;
}
.tl {
  min-height: 30px;
  background: rgba(255, 0, 0, .1);
  flex: 0 0 30%;
}
.tr {
  flex: 1 1 100%;
  background: rgba(0, 0, 255, .1);
  font-weight: 600;
  font-size: 1.0rem;
  text-align: center;
  align-self: center;
}
.mc {
  top: 30px; /* 对应.t的min-height，让内容衔接 */
  bottom: 60px; /* 预留.bc的高度 */
  background: rgba(0, 255, 0, .1);
  padding: 0.5rem 0.5rem;
  overflow: auto; /* 防止内容溢出 */
}
.bc {
  bottom: 0;
  background: rgba(255, 255, 0, .1);
  padding: 1.0rem 0.5rem;
}

关键修改点说明 #

1. 移除容器固定高度：把.container的min-height:375px去掉，让容器自适应卡片的高度。
2. 卡片用padding撑开高度：.card的padding-top:253.38%是核心，确保高度始终是宽度的2.5338倍。
3. 背景图移到伪元素：避免padding影响背景图的显示，伪元素占满整个卡片容器。
4. 内部元素绝对定位：让文本区域正确覆盖在背景图上，不受padding的影响，同时通过top/bottom控制各区域的位置和高度。
5. 修正flex-wrap属性：原代码中flex-wrap: row是错误的，改为flex-wrap: wrap确保卡片在窗口变小时能正常换行。

这样调整后，卡片的高度会完全跟随宽度按固定比例缩放，容器也不会塌陷，完美实现响应式效果。

内容的提问来源于stack exchange，提问作者Neo