实现随容器尺寸自适应的1:1宽高比双卡片响应式布局

需求 #

两张并排卡片需根据容器尺寸自动调整宽高，始终保持1:1宽高比，无溢出，同时支持随容器宽度或高度变化自适应缩放。

整合后的代码实现 #

HTML代码 #

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
</div>

CSS代码 #

.container {
  resize: both;
  overflow: auto;
  width: 300px;
  height: 300px;
  border: 2px solid blue;
  display: flex;
  gap: 4px;
  padding: 4px;
}

.card {
  flex: 1;
  aspect-ratio: 1/1;
  /* 限制宽度不超容器一半（减去间隙），避免换行 */
  max-width: calc(50% - 2px);
  /* 限制高度不超容器，同时匹配宽度比例 */
  max-height: min(100%, calc((100% - 8px) * 2));
}

.card:first-of-type {
  background-color: red;
}

.card:last-of-type {
  background-color: blue;
}

核心逻辑 #

• Flex布局：让两张卡片平分容器宽度空间，始终保持并排状态
• aspect-ratio：强制卡片维持1:1的正方形宽高比
• max-width：确保单张卡片宽度不超过容器一半（减去间隙），避免宽度溢出或换行
• max-height：通过min()函数限制卡片高度不超过容器高度，同时根据容器高度反向匹配宽度比例，实现宽高双向自适应

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