css 高度跟着宽度按比例

CSS 中实现高度随着宽度按照一定比例变化，通常利用 `height` 属性以及 `width` 或者其他尺寸属性的关系。为了保持元素的比例不变，可以使用 `aspect-ratio` CSS 属性或者传统的数学计算来设定。

### 使用 `aspect-ratio`

HTML 和 CSS 的 `aspect-ratio` 属性提供了一个方便的方式来设置或保持元素的宽高比。这意味着你可以通过指定一个数值（例如 "4 / 3" 表示 4 部分宽对 3 部分高），然后让浏览器自动调整宽度或高度以匹配这个比率。这对于图片、视频或其他需要维持固定比例的内容非常有用。

**例子：**

<div class="image-container">
</div>

.image-container {
  width: 100%; /* 自适应容器宽度 */
  height: auto; /* 让高度自动调整以维持比例 */
  aspect-ratio: 4 / 3; /* 宽高比为 4 : 3 */
}

### 手动计算

如果你想完全控制高度和宽度的比例，并手动设置它们，可以使用简单的数学公式。假设你需要的是宽度和高度以一定的比率增长：

假设你有如下 HTML 结构：

<div class="proportional-element">
</div>

并且你想将元素的宽度设置为 50%，那么其高度应该是其宽度的 $\frac{height}{width}$，如果宽度是 50%，则高度应该是 33.3% 来保持 4:3 的比率。

**CSS 示例：**

.proportional-element {
  position: relative;
  width: 50%;
}

.proportional-element::before {
  content: "";
  display: block;
  padding-top: calc(75%); /* 这里的值等于原宽度乘以高度比例，这里是 33.3%，所以是 50% * 66.6% */
}

在这个例子中，我们通过伪元素 `::before` 创建了内边距（padding）来模拟高度，而实际上并没有真正的增加高度空间，只是改变了可视区域的大小来保持比例。

### 相关问题:

1. 如何在 CSS 中使用 `aspect-ratio` 设置图像比例？
2. 在实际项目中如何优化和应用 CSS 高度宽度比例调整技巧？
3. 当使用动态内容改变元素宽度时，如何保证其高度也能够按照预设比例调整而不失真？