窗口 resize 时如何保持卡片内图片容器的固定宽高比？

下面提供两种可靠的方案，让卡片容器保持固定宽高比，同时随窗口宽度自适应缩小，图片不会挤压变形：

方案一：使用CSS aspect-ratio 属性（现代浏览器优先） #

这是最简洁的实现方式，直接通过原生CSS属性定义宽高比，无需额外技巧。

HTML结构 #

<div class="card-container">
  <img src="your-image-url.jpg" alt="卡片图片" class="card-image">
  <!-- 可选：卡片底部的文字内容 -->
  <div class="card-content">
    <p>卡片标题或描述</p>
  </div>
</div>

CSS代码 #

.card-container {
  /* 定义宽高比，比如16:9写16/9，4:3写4/3，正方形写1/1 */
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 400px; /* 可选：限制卡片最大宽度 */
  margin: 1rem;
  overflow: hidden;
  border-radius: 8px; /* 可选：圆角效果 */
}

.card-image {
  width: 100%;
  height: 100%;
  /* 保持图片比例，裁剪超出部分，避免拉伸变形 */
  object-fit: cover;
}

.card-content {
  /* 如果需要底部内容，可调整定位或布局，比如卡片改为flex纵向排列 */
  padding: 0.8rem;
  background: #fff;
}

方案二：padding-top百分比技巧（兼容旧浏览器） #

对于不支持aspect-ratio的旧浏览器（如IE），可以利用padding百分比基于父元素宽度计算的特性，模拟固定宽高比。

HTML结构 #

<div class="card-container">
  <div class="image-wrapper">
    <img src="your-image-url.jpg" alt="卡片图片" class="card-image">
  </div>
  <div class="card-content">
    <p>卡片标题或描述</p>
  </div>
</div>

CSS代码 #

.card-container {
  width: 100%;
  max-width: 400px;
  margin: 1rem;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

/* 用padding-top实现宽高比：比如16:9的比例，高度=宽度*9/16=56.25% */
.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9对应的值，4:3是75%，正方形是100% */
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 0.8rem;
}

关键说明 #

• object-fit: cover 是保证图片不拉伸的核心，它会按比例缩放图片，裁剪超出容器的部分，保持图片完整性。如果希望完整显示图片（可能留空白），可以改用object-fit: contain。
• 两种方案都支持响应式，容器宽度随父元素（或窗口）缩小而同步缩小，宽高比始终保持不变。

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