For AI agents: the complete documentation index is available at /next/zh/llms.txt, the full documentation bundle is available at /next/zh/llms-full.txt, and this page is available as Markdown at /next/zh/api/css/properties/aspect-ratio.md.
Lynx
  • 简体中文
  • 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 许可协议进行许可。