宽高比

宽高比是元素或视口的宽度和高度之间的比例关系。它表示为两个数字的<ratio>。

拥有宽高比，无论是图像和视频固有的宽高比，还是外部设置的宽高比，都可以保持元素的预期比例。你还可以查询元素或视口的宽高比，这对于开发灵活的组件和布局非常有用。

在 CSS 中，<ratio> 数据类型写为 width / height（例如，正方形为 1 / 1，宽屏为 16 / 9）或单个数字，在这种情况下，该数字表示宽度，高度为 1。

.wideBox {
  aspect-ratio: 5 / 2;
}
.tallBox {
  aspect-ratio: 0.25;
}

在 SVG 中，宽高比由一个四值viewBox 属性定义。前两个值是 SVG 可以具有的最小 X 和 Y 原点坐标，后两个值是设置 SVG 宽高比的宽度和高度。

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"></svg>

在 JavaScript API 中，查询宽高比会返回一个双精度浮点数，表示宽度除以高度。你还可以使用 JavaScript 设置元素的宽高比。例如，使用 MediaStreamTrack 或 MediaTrackSettings 字典的 aspectRatio 属性为 1920x1080 视频设置宽高比约束将计算为 16/9 或 1920/1080，即 1.7777777778

const constraints = {
  width: 1920,
  height: 1080,
  aspectRatio: 1.777777778,
};

myTrack.applyConstraints(constraints);