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;
取值
形式定义
形式语法
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
aspect-ratio | ||||||||||||
auto |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.