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 |
---|---|
适用元素 | all elements except inline boxes and internal ruby or table boxes |
是否是继承属性 | 否 |
计算值 | as specified |
Animation type | by computed value type |
形式语法
示例
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