aspect-ratio

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

CSS 属性 aspect-ratio 为盒子规定了首选纵横比，这个纵横比可以用于计算 auto 尺寸以及其他布局函数。

尝试一下

css
aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* 全局值 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

取值

auto

具有固有纵横比的可替换元素将使用此纵横比，否则盒子无首选纵横比。涉及固有纵横比的尺寸计算始终使用内容盒的尺寸。

<ratio>

盒子的首选纵横比为指定的 width / height 比率。如果省略 height 和前面的斜杠字符，则 height 默认为 1。涉及首选纵横比的尺寸计算使用由 box-sizing 所指定的盒子的尺寸。

形式定义

初始值auto
适用元素all elements except inline boxes and internal ruby or table boxes
是否是继承属性否
计算值as specified
动画类型按计算值的类型

形式语法

aspect-ratio = 
  auto     ||
  <ratio>  

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?

示例

aspect-ratio 的取值示例

css
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;

规范

Specification
CSS Box Sizing Module Level 4
# aspect-ratio

浏览器兼容性

BCD tables only load in the browser

参见