宽高等比缩放，响应式适配移动端

比例是如何计算的

在设计中，要实现banner随着宽度等比缩放，需要保持其宽高比不变

已知设计稿宽度为 1920px，banner 高度为 724px，则宽高比为 1920:724，可化简为 480:181。 当 banner 的宽度变为任意值x时，设此时高度为y，根据等比关系可得$：x/y=480/181$，所以$y=181*x/480$

在实际应用中，可根据上述公式，通过获取当前容器的宽度x，计算出对应的高度y，来实现 banner 的等比缩放。

以下是不同场景下的代码实现方式，核心是通过CSS保持宽高比：

1. CSS 实现（推荐，最简单）

.banner {
  width: 100%; /* 宽度自适应容器 */
  height: auto; /* 高度自动等比缩放 */
  max-width: 1920px; /* 限制最大宽度（可选） */
}

• 原理：设置 width: 100% 让图片/容器宽度填满父元素，height: auto 会自动根据原始宽高比计算高度。
• 适用场景：图片/Banner 为独立元素（如 <img> 或 <div>）。

2. CSS Padding Hack（固定比例容器）

若 Banner 是包含内容的容器（如 <div>），需用 padding 模拟比例：

.banner-container {
  width: 100%;
  padding-top: 38.75%; /* 高度比例 = (724/1920)*100% ≈ 38.75% */
  position: relative; /* 定位子元素 */
}

.banner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('banner.jpg'); /* 背景图 */
  background-size: cover; /* 背景图自适应 */
}

• 计算逻辑：padding-top 的值 = (设计稿高度/设计稿宽度)*100%，即 724/1920≈38.75%。

3. JavaScript 动态计算（复杂场景）

当需要动态获取容器宽度并计算高度时：

<img src="banner.jpg" id="banner" alt="Banner">

<script>
  function resizeBanner() {
    const banner = document.getElementById('banner');
    const containerWidth = banner.parentElement.clientWidth; // 获取父容器宽度
    const ratio = 724 / 1920; // 高宽比 = 设计稿高度/宽度
    banner.style.height = containerWidth * ratio + 'px'; // 计算高度
  }

  // 页面加载时和窗口缩放时执行
  window.addEventListener('load', resizeBanner);
  window.addEventListener('resize', resizeBanner);
</script>

• 适用场景：需要兼容老旧浏览器，或 Banner 高度需影响布局计算时。

关键比例计算

• 高宽比：724 ÷ 1920 ≈ 0.377（即高度 = 宽度 × 0.377）。
• 反向验证：若最终宽度为 1200px，则高度应为 1200 × 0.377 ≈ 452px。
• 反向验证：若最终宽度为 100vw，则高度应为 100vw × 0.377。
• 根据实际需求选择代码方案，CSS 方案最简洁，JS 方案灵活性更高。