CSS中如何让经clamp计算宽度的元素高度与宽度一致

height: auto 无法实现等宽高的核心原因是：这个取值会让图片高度按照图片资源本身的原始宽高比渲染，只有当加载的原图本身是1:1正方形时，才会刚好宽高相等，只要原图比例不是正方形，就达不到预期效果。

方案1：使用aspect-ratio属性（首选） #

这是目前最简洁的实现方式，所有现代浏览器均原生支持，不需要额外DOM结构、不需要JS干预，浏览器会自动根据你设置的clamp宽度计算对应高度，保证宽高完全相等。
直接修改CSS即可，删除原有height: auto配置，新增宽高比设置：

img {
  width: clamp(100px, 160px, 27vw);
  aspect-ratio: 1 / 1; /* 强制元素宽高比为1:1 */
  object-fit: cover; /* 保证图片不变形，裁剪填充正方形区域 */
}

修改后运行你原有打印元素宽高的JS代码，就能看到offsetWidth和offsetHeight数值完全一致。

方案2：Padding Hack（兼容老旧浏览器） #

如果需要兼容IE11这类不支持aspect-ratio属性的老旧浏览器，可以利用「padding百分比值相对于元素自身宽度计算」的特性实现等宽高，需要给图片加一层父容器：
首先修改HTML结构：

<div class="img-container">
  <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/488px-Apple_logo_black.svg.png?20211218170823">
</div>

然后替换原有CSS：

.img-container {
  width: clamp(100px, 160px, 27vw);
  height: 0;
  padding-top: 100%; /* 撑开和宽度完全相等的高度 */
  position: relative;
}
.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* 图片铺满整个父容器 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

• 不推荐用JS获取宽度再手动设置高度的方案：窗口缩放、布局重排时都需要额外绑定事件重新计算，维护成本高、性能差，上述两个纯CSS方案完全可以覆盖需求。
• 务必保留object-fit配置，否则图片会被强制拉伸变形，可根据实际展示需求选择cover（裁剪填充，不留空白）或contain（完整显示图片，可能留边）。

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