如何将div的宽度设置为相对于自身高度的比例？

针对你提出的需求（比如让元素高度为宽度的0.67倍，或反过来让宽度基于高度按比例计算），以下是几种实用的实现方法：

1. 使用 CSS aspect-ratio 属性（推荐方案） #

这是现代浏览器最直接的解决方案，aspect-ratio 可以直接定义元素的宽高比例，设置任意一个维度后，另一个维度会自动按比例适配。

示例1：让高度随宽度按比例变化（对应你给出的代码需求） #

.classname {
  width: 40%; /* 宽度基于父元素 */
  aspect-ratio: 1 / 0.67; /* 高度 = 宽度 × 0.67，即宽高比 1:0.67 */
  background-color: #eee;
}

示例2：让宽度随高度按比例变化 #

如果需要宽度基于自身高度计算（比如宽度是高度的1.5倍）：

.classname {
  height: 200px; /* 固定高度 */
  aspect-ratio: 1.5 / 1; /* 宽度 = 高度 × 1.5，即宽高比 1.5:1 */
  background-color: #eee;
}

该属性兼容Chrome 88+、Firefox 89+、Safari 15+，足以覆盖绝大多数现代场景。

2. 利用 padding 百分比技巧（兼容旧浏览器） #

如果需要兼容不支持aspect-ratio的旧浏览器，可以借助CSS中padding-bottom/padding-top的百分比基于父元素宽度的特性，实现固定宽高比：

实现高度随宽度按比例变化（对应你的需求） #

.classname {
  width: 40%;
  padding-bottom: 26.8%; /* 计算方式：40% × 0.67 = 26.8% */
  position: relative;
  background-color: #eee;
}
/* 若元素内有内容，需用绝对定位填充 */
.classname .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

原理是padding-bottom的百分比值会基于父元素宽度计算，从而让元素的实际高度等于宽度的0.67倍。

3. JavaScript 动态计算（灵活适配动态场景） #

如果元素高度是动态变化的（比如由内容撑开或响应式调整），可以用JS实时计算宽度：

const targetElem = document.querySelector('.classname');

// 初始计算
const currentHeight = targetElem.offsetHeight;
targetElem.style.width = `${currentHeight * 1.5}px`; // 宽度为高度的1.5倍

// 监听窗口变化，实时更新
window.addEventListener('resize', () => {
  const newHeight = targetElem.offsetHeight;
  targetElem.style.width = `${newHeight * 1.5}px`;
});

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