aspect-ratio

aspect-ratio CSS 属性为 box 容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。

aspect-ratio: 1 / 1;

/* 全局值 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: unset;

数值

<auto> (en-US)

具有固有宽高比的替换元素将使用该宽高比，否则该内容框没有首选的宽高比。涉及固有宽高比的尺寸计算始终与内容框尺寸一起使用。

<ratio>

内容框首选的宽高比是通过 width / height 定义的。当为内容框定义 box-sizing 之后，尺寸的计算就可以通过指定宽高比来实现。

正式定义

初始值auto
适用元素all elements except inline boxes and internal ruby or table boxes
是否是继承属性否
计算值as specified
Animation typediscrete

正式语法

aspect-ratio = 
  auto     ||
  <ratio>  

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?

示例

纵横比数值例子

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

将宽度和高度关联到宽高比

浏览器内部已经为替换的元素和其他接受 width 和 height 的元素添加了 aspect-ratio。这些可以在浏览器的 UA 样式表中看到。

在 Firefox 中，内部样式表看起来如下：

img, input[type="image"], video, embed, iframe, marquee, object, table {
  aspect-ratio: attr(width) / attr(height);
}

您可以在 为图片设置宽高仍然重要 gain 一文中了解更多与这个功能有关的内容。

规范

Specification
CSS Box Sizing Module Level 4
# aspect-ratio

浏览器兼容性

BCD tables only load in the browser

相关阅读