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 2021年9月.
CSS 属性 aspect-ratio 为盒子规定了首选纵横比，这个纵横比可以用于计算 auto 尺寸以及其他布局函数。
尝试一下
aspect-ratio: auto; aspect-ratio: 1 / 1; aspect-ratio: 16 / 9; aspect-ratio: 0.5; <section id="default-example"> <img class="transition-all" height="640" id="example-element" src="/shared-assets/images/examples/plumeria.jpg" width="466" /> </section> #example-element { height: 100%; width: 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 |