CSS宽高比实现：基于动态父元素高度设置子元素宽度

嘿，我完全懂你要的效果——卡片高度由标题这类内部内容说了算，同时子元素的宽度得跟着父容器的动态高度走，而且你已经试过常规宽高比（宽控高）、图片定容器宽的方案，现在要纯CSS的解法对吧？下面给你几个可行的技巧，包括一些新型CSS特性：

方案1：利用 writing-mode 反转布局方向 #

这个思路是把垂直方向的高度“转化”成水平方向的宽度参考，核心是通过改变书写模式让容器的高度成为宽度计算的基准：

.card {
  /* 卡片宽度自适应内容，高度由内容自动撑开 */
  width: fit-content;
  border: 1px solid #eee;
  padding: 1rem;
}

.card__child {
  /* 先反转布局方向，让高度成为宽度的参考轴 */
  writing-mode: vertical-lr;
  /* 设置宽高比，比如1:1就相当于宽度=父元素高度 */
  aspect-ratio: 1/1;
  /* 再反转回来，保证内容正常水平显示 */
  writing-mode: horizontal-tb;
  background: #f5f5f5;
}

核心逻辑：

• 卡片用width: fit-content让宽度跟随内容，自然高度就由内部标题、文本等内容决定
• 子元素先通过writing-mode切换布局方向，让aspect-ratio的计算基准从宽度变成高度，切换回来后就实现了宽度随父元素动态高度变化的效果

方案2：CSS Grid + 反向 aspect-ratio 控制 #

如果需要更灵活的比例调整，可以结合Grid布局和aspect-ratio的反向计算：

.card {
  display: grid;
  width: fit-content;
  gap: 1rem;
  border: 1px solid #eee;
  padding: 1rem;
}

.card__child {
  /* 强制子元素高度和卡片内容高度一致 */
  height: 100%;
  /* 用aspect-ratio反向定义：宽/高 = 0.8 → 宽度=高度×0.8，可按需调整比例 */
  aspect-ratio: 0.8/1;
  background: #f5f5f5;
}

这个方案的关键是让子元素高度继承卡片的内容高度，再通过aspect-ratio的比例关系，直接推导子元素的宽度，完全不需要JS介入。

方案3：实验性属性 container-type（需注意兼容性） #

如果浏览器兼容性对你来说不是硬限制，可以试试CSS容器查询的container-type: size，它能让我们直接基于容器的高度来设置子元素样式：

.card {
  /* 将卡片标记为尺寸容器，允许子元素基于它的尺寸做查询 */
  container-type: size;
  width: fit-content;
  padding: 1rem;
  border: 1px solid #eee;
}

@container (height > 120px) {
  .card__child {
    /* cqh是容器高度单位，1cqh=容器高度的1%，这里直接设为90%容器高度 */
    width: 90cqh;
    background: #f5f5f5;
  }
}

@container (height <= 120px) {
  .card__child {
    width: 100cqh;
    background: #f5f5f5;
  }
}

cqh单位非常直观，能直接关联容器高度和子元素宽度，但目前这个属性还在逐步普及，旧版浏览器可能不支持，需要谨慎使用。

内容的提问来源于stack exchange，提问作者Donnie D'Amato