aspect-ratio

翻译不完整。 请帮助我们翻译这篇文章!

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

aspect-ratio: 1 / 1;

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

数值

<auto>
具有固有宽高比的替换元素将使用该宽高比,否则该内容框没有首选的宽高比。 涉及固有宽高比的尺寸计算始终与内容框尺寸一起使用。
<ratio>
内容框首选的宽高比是通过 width / height 定义的。当为内容框定义 box-sizing 之后,尺寸的计算就可以通过指定宽高比来实现。

正式定义

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

正式语法

auto | <ratio>

示例

纵横比数值例子

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 一文中了解更多与这个功能有关的内容。

规范

规范 状态 注释
CSS Box Sizing Module Level 4
aspect-ratio
Editor's Draft 初始定义

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
aspect-ratioChrome Full support 84
Disabled
Full support 84
Disabled
Disabled From version 84: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox Partial support 83
Notes Disabled
Partial support 83
Notes Disabled
Notes Firefox 83 implements aspect-ratio for flex items.
Disabled From version 83: this feature is behind the layout.css.aspect-ratio.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Partial support 81
Notes Disabled
Notes Firefox 81 implements aspect-ratio for blocks and replaced elements.
Disabled From version 81: this feature is behind the layout.css.aspect-ratio.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

相关阅读