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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
aspect-ratio
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见