aspect-ratio

介绍

设置元件宽高比,即 width / height

使用示例

语法

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

取值

<ratio>

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

INFO

<ratio> CSS 数据类型,表示两个无单位值之间的比例。

句法

<ratio> 数据类型包括一个正数的 <number> 值,后跟一个正斜杠('/',Unicode U + 002F SOLIDUS)和第二个正数的 <number> 值。此外,允许使用单个正数 <number> 作为值。

形式定义

初始值has no preferred aspect ratio
适用元素all elements
是否支持继承no
是否支持动画

形式语法

aspect-ratio = <number [0,∞]> [ / <number [0,∞]> ]

与 Web 的区别

mdn: aspect-ratio

  1. 不支持 auto,默认为无宽高比。

兼容性

LCD tables only load in the browser

除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。