在日常生活中，我们常常会看到视频或照片能够随着页面尺寸变化，按照自身宽高比进行缩放调整。这种效果是如何实现的呢？ 

可以通过 CSS 和 JavaScript 两种方式完成，其中 CSS 是比较推荐的方式，因为它能充分利用现代浏览器的响应式布局能力，而无需监听和处理大量的页面事件。

方法 1：使用 CSS aspect-ratio 属性

原理：aspect-ratio 是 CSS 提供的一个属性，用于设置宽高比。通过定义一个比例，浏览器会根据宽度自动计算高度，或者根据高度自动计算宽度，从而保持元素的比例。

宽高比公式：height = width / aspect-ratio。

实现方式：在需要响应式的元素上设置 aspect-ratio 属性，给定宽度（或者高度），浏览器会自动计算另一个值。

代码为：

<div class="container">
  <div class="content"></div>
</div>

.container {
  width: 100%; /* 占据父容器的宽度 */
  height: 100%; /* 占据父容器的高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  width: 50%; /* 初始宽度为容器宽度的 50% */
  aspect-ratio: 16 / 9; /* 保持 16:9 的宽高比 */
  background-color: pink;
}

展示如下，不管页面比例多少，类为 content 的 div 元素比例始终是：16/9。

说明：内容在 container 中居中，且会随着页面尺寸变化自动缩放。aspect-radio：定义宽高比，浏览器会根据宽度自动计算高度。

 📢：存在兼容性问题。

优点：无需额外代码，浏览器自动处理。限制：不支持 IE 浏览器，需现代浏览器。

方法 2：使用 padding 技术模拟宽高比

原理：CSS 的 padding 值是根据父容器（包含块）的宽度计算的。利用 padding-top 或 padding-bottom 模拟高度，可以保持宽高比。

公式为：height = width × padding-top（百分比）

举个 🌰：16:9 比例的 padding-top 是 9÷16×100%=56.25%。

具体代码：

<div class="responsive-box"></div>

.responsive-box {
  position: relative;
  width: 100%; /* 占满宽度 */
  padding-top: 56.25%; /* 高度按照宽度的 16:9 比例计算 */
  background-color: lightpink;
}

实现 div 比例始终为 16: 9，跟随页面变化而变化。 

但是会出现一个问题：因为高度使用 padding-top 撑开的，导致内部如果有内容，将会在底部展示。

<div class="responsive-box">
  <div class="content">子元素内容，在外层 div 的底部展示。</div>
</div>

如何解决呢？内部再嵌套一个 div，将其设置为绝对定位。 

<div class="responsive-box">
  <div class="content">
    <div class="display">子元素内容，在 div 的内部展示。</div>
  </div>
</div>

.responsive-box {
  position: relative; /* 父容器相对定位 */
  width: 100%; /* 占满宽度 */
  padding-top: 56.25%; /* 高度按照宽度的 16:9 比例计算 */
}

.content {
  position: absolute; /* 子元素绝对定位 */
  top: 0;
  left: 0;
  width: 100%; /* 填满父容器宽度 */
  height: 100%; /* 填满父容器高度 */
  background-color: rgb(255, 212, 212);
}
.display {
  border-radius: 4px;
  border: 2px solid rgb(255, 172, 255);
}

即可实现，内容从上到下依次排序展示。

说明：position: absolute，让内容占据整个容器的宽高。

优点：兼容性极强，支持几乎所有浏览器。限制：需要额外的 position 样式，增加了复杂度。

方法 3：使用 CSS + JavaScript 动态缩放

原理：通过 JavaScript 获取容器的宽度（offsetWidth），按照指定的宽高比计算高度，然后动态设置高度（style.height）。当窗口尺寸发生变化时（监听 resize），重新计算高度以保持比例。

代码为：

<div id="responsive-box" style="background-color: lightgreen;"></div>

#responsive-box {
  width: 50%; /* 初始宽度为页面宽度的 50% */
  height: auto; /* 由 JS 控制高度 */
  margin: 0 auto; /* 居中显示 */
}

function resizeBox() {
  const box = document.getElementById('responsive-box');
  const width = box.offsetWidth; // 获取当前宽度
  const aspectRatio = 16 / 9; // 宽高比
  box.style.height = `${width / aspectRatio}px`; // 设置高度
}

// 初始调整
resizeBox();

// 监听窗口大小变化
window.addEventListener('resize', resizeBox);

展示为：

优点：控制灵活，可以结合其他逻辑动态调整宽高。限制：需要监听 resize 事件，对性能有一定影响。

对比和适用场景

方法	原理	优点	缺点
CSS aspect-ratio	自动根据宽度或高度调整另一个值	简洁高效，适合现代浏览器	不支持 IE，兼容性较低
padding	利用 padding-top 或 padding-bottom 模拟高度	兼容性强，支持老旧浏览器	子元素必须用绝对定位
JavaScript 动态缩放	根据宽度动态计算高度	控制灵活，适用复杂场景	性能影响较大，增加了监听事件和维护成本

1、现在项目，首选 aspect-ratio，简单易用， 适合开发简单的响应式布局。

2、兼容旧浏览器：选择 padding，这种方法几乎支持所有浏览器。

3、特殊要求：如果需要动态调整比例或加入额外的逻辑，JavaScript 是唯一的选择。