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
之后,尺寸的计算就可以通过指定宽高比来实现。
正式定义
正式语法
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