跨域问题 CROSS

基本语法

aspect-ratio 是 CSS 中用于设置元素宽高比（长宽比）的一个属性，它的作用是：让元素的宽度和高度始终保持一个固定的比例，而不需要手动计算或写死高度。

selector {
  aspect-ratio: width / height;
}

写法	含义
aspect-ratio: 1 / 1;	正方形（宽 = 高）
aspect-ratio: 16 / 9;	宽屏视频比例
aspect-ratio: 4 / 3;	传统屏幕比例
aspect-ratio: 3 / 2;	常见照片比例
aspect-ratio: 1;	等价于 1 / 1

只要设置了宽度（或高度），另一个维度会自动按比例计算。

工作原理（举例）

假设你有：

<div class="box">图片容器</div>

.box {
  width: 300px;
  aspect-ratio: 16 / 9;
  background: lightblue;
}

那么：

• 宽度 = 300px
• 高度 = 300 × (9 / 16) = 168.75px

浏览器会自动计算高度，无需你写 height！

典型应用场景

商品卡片 / 图片容器

.pic {
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形 */
}

→ 无论屏幕多宽，图片区域始终是正方形。

视频播放器

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

响应式头像

.avatar {
  width: 80px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

兼容性问题

虽然 aspect-ratio 很方便，但 它在部分平台不支持，尤其是在 uni-app 跨端开发中需特别注意：

平台	支持情况
现代浏览器（Chrome 88+、Firefox 89+、Safari 15+）	✅ 支持
H5（uni-app）	✅ 在较新浏览器中支持
微信小程序	❌ 基础库 < 2.19.0 不支持（2021年11月后才支持）
App（uni-app 打包成 App）	⚠️ 依赖系统 WebView，Android 低版本可能不支持
HBuilderX 内置浏览器	⚠️ 可能模拟旧环境，表现异常