此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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> <img height="640" 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 |