Bootstrap 4：固定宽高比图片的响应式卡片高度适配问题

先理清楚你的核心需求：大屏下（≥992px）卡片固定250×250px，无内容时也保持这个高度；小屏时卡片能随着动态插入的图片自动缩小高度，同时图片始终保持243:166的宽高比。问题出在全局设置的max-height:250px限制了小屏下的高度收缩，我们可以通过媒体查询+CSS比例控制来解决：

1. 调整卡片基础样式，移除全局max-height #

首先去掉全局的max-height:250px，改用媒体查询只在大屏时锁定卡片尺寸，小屏下让卡片高度由内容决定：

/* 卡片基础样式 */
.card {
  border: 1px solid #ddd;
  box-sizing: border-box;
  padding: 0.35rem; /* 预留内边距，避免图片贴边 */
  width: 100%; /* 小屏下占满容器宽度 */
  min-height: 120px; /* 无内容时的最小高度，可根据需求调整 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 大屏（≥992px）下固定卡片尺寸 */
@media (min-width: 992px) {
  .card {
    width: 250px;
    height: 250px;
    min-height: 250px; /* 强制无内容时保持固定高度 */
  }
}

2. 锁定图片宽高比，适配不同屏幕 #

接下来要保证动态插入的图片始终保持243:166的比例，同时在大屏下不超出卡片范围。这里有两种方案：

方案A：用CSS aspect-ratio（现代浏览器推荐） #

直接给图片设置固定比例，同时限制最大宽高，确保在卡片内自适应：

.card img {
  aspect-ratio: 243 / 166; /* 精确锁定图片宽高比 */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 图片完整显示，不裁剪；如果需要填充卡片可用cover */
}

方案B：兼容性方案（支持旧版浏览器） #

如果需要兼容不支持aspect-ratio的浏览器（比如IE11），可以给图片套一个容器，用padding-top模拟比例：

<!-- 卡片结构，给图片加容器 -->
<div class="card">
  <div class="card-body">
    <div class="image-wrapper">
      <!-- jQuery动态插入的图片会放在这里 -->
      <img src="your-image-url" alt="描述">
    </div>
  </div>
</div>

对应的CSS：

.image-wrapper {
  position: relative;
  width: 100%;
  /* 计算比例：166/243*100% ≈ 68.31% */
  padding-top: calc(166 / 243 * 100%);
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

3. jQuery动态插入图片无需额外处理 #

不管用哪种方案，当你通过jQuery插入图片时，CSS会自动处理缩放和比例，比如：

// 示例：动态插入图片
$('.card-body').append('<img src="your-image-path.jpg" alt="卡片图片">');

为什么这样有效？ #

• 大屏下通过媒体查询强制卡片固定250×250px，min-height保证无内容时不会塌陷；
• 小屏下移除了max-height限制，卡片高度由图片的自适应高度决定，自然随图片缩小；
• 图片的比例被CSS锁定，无论屏幕尺寸如何，都不会变形，同时在卡片内合理缩放。

内容的提问来源于stack exchange，提问作者J. Taylor