能否在CSS的calc()中使用aspect-ratio或元素自身宽度？

可以通过嵌套容器+百分比padding+绝对定位内容的方式实现你要的效果，完美避开JavaScript，同时支持元素内部有内容的场景。

核心思路 #

利用CSS中padding-top/padding-bottom的百分比值基于元素自身宽度计算的特性，结合calc()把比例部分和固定值相加，再通过绝对定位让内容脱离文档流，避免内容撑开容器高度。

代码示例 #

/* 外层容器：负责控制高度 */
.height-calc-container {
  position: relative;
  width: 60%; /* 示例宽度，可替换为任意值（如100%、300px等） */
  /* 核心计算：宽度*2 + 2rem + 40px */
  padding-top: calc(200% + 2rem + 40px);
  background: #f0f0f0; /* 仅用于可视化容器范围 */
}

/* 内容容器：填充整个外层容器，正常渲染内容 */
.height-calc-container .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem; /* 可选：给内容加内边距 */
  box-sizing: border-box; /* 让内边距不超出容器范围 */
}

<div class="height-calc-container">
  <div class="content">
    这里可以放任意内容，文本、图片、表单都没问题，容器高度不会被内容影响。
  </div>
</div>

为什么这个方案可行？ #

1. 百分比padding的特性：padding-top: 200%等价于「元素宽度 × 2」，完全符合你需要的比例部分；
2. calc()的组合能力：直接把比例值和固定的2rem + 40px相加，得到最终的容器内边距高度；
3. 绝对定位内容：内容脱离文档流后，容器高度完全由padding控制，同时内容可以填充整个容器空间，正常展示内容，解决了你提到的「padding技巧不适用于有内容场景」的问题；
4. 响应式兼容：无论容器宽度是百分比、视窗单位还是动态变化的值，高度都会自动跟随计算。

补充说明 #

如果你的元素不需要独立的内容容器，也可以用伪元素替代外层容器的padding逻辑，但嵌套容器的方式更直观，也更便于管理内容样式。

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