纵横比

**纵横比**是指元素或视口的宽度和高度之间的比例关系,并表示为两个数字的比率。

无论纵横比是图像和视频等固有纵横比,还是外在设置的纵横比,它都保持了元素的预期比例。您还可以查询元素或视口的纵横比,这在开发灵活的组件和布局时非常有用。

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

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

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

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

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

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

myTrack.applyConstraints(constraints);

另请参阅