响应式16/9容器内正方形图片适配问题求助

需求 #

• 正方形图片添加侧边白边，形成16/9比例的矩形容器
• 容器外设置紫色背景、内边距及文本信息
• 白色容器首选宽度为300px
• 屏幕缩小时，图片同步收缩且保持16/9比例

当前问题 #

• 白色容器设为width: 300px：大屏显示正常，但小屏无法自适应收缩
• 白色容器设为width: clamp(10px, 300px, 100%)：小屏可收缩，但大屏时容器宽度会被内部文本撑开，浏览器无法正确解析clamp值，导致紫色卡片宽度混乱

解决方案 #

核心是让卡片在不同屏幕尺寸下的宽度逻辑清晰：

1. 卡片.card默认设置max-width: fit-content，大屏时由内部300px的图片容器决定宽度，避免被文本撑开；小屏时通过媒体查询将max-width设为100%，让卡片占满可用空间。
2. 图片容器.img-16-9使用width: min(300px, 100%)，直接实现“首选300px，最大不超过父容器宽度”的适配效果，浏览器解析更稳定。
3. 卡片改用margin: 0 auto实现居中，无需切换display属性，简化布局逻辑。

修改后代码 #

CSS #

.host-container {
  padding-top: 50px;
  text-align: center;
  background-color: #2c3e50;
  height: 400px;
}

.large {
  width: 500px;
}

.small {
  width: 200px;
}

.card {
  background-color: #8e44ad;
  color: white;
  border-radius: 20px;
  padding: 1rem;
  max-width: fit-content;
  margin: 0 auto;
}

.img-16-9 {
  display: flex;
  justify-content: center;
  width: min(300px, 100%);
  aspect-ratio: 16/9;
  background-color: white;
}

.img-square {
  height: 100%;
  background-image: url(https://cdn-icons-png.flaticon.com/512/3135/3135715.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #ecf0f1;
  aspect-ratio: 1;
}

/* 小屏适配，可根据实际需求调整断点 */
@media (max-width: 400px) {
  .card {
    max-width: 100%;
  }
}

HTML #

<!-- host-container simulates the screen width -->
<div class="host-container large">
  <div class="card">
    <div class="img-16-9">
      <div class="img-square"></div>
    </div>
    <h1>J. Doe</h1>
  </div>
</div>

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