aspect-ratio

在此页

形式定义
形式句法
范例
Mapping width and height to aspect-ratio
规范
浏览器兼容性
另请参阅
相关话题

aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

aspect-ratio: 1 / 1;
/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: unset;

值

<auto>: Replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions.
<ratio>: The box’s preferred aspect ratio is the specified ratio of width / height . Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing .

形式定义

初始值	`auto`
适用于	all elements except inline boxes and internal ruby or table boxes
继承	no
计算值	如指定
动画类型	discrete

形式句法

auto | <ratio>

范例

Examples of values for aspect-ratio

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

Mapping width and height to aspect-ratio

Browsers have added an internal aspect-ratio property that applies to replaced elements and other related elements that accept width and height attributes. This appears in the browser's internal UA stylesheet.

In Firefox, the internal stylesheet rule looks like this:

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

You can read more about this feature in Setting Height And Width On Images Is Important Again .

规范

规范	状态	注释
CSS Box Sizing Module Level 4 The definition of 'aspect-ratio' in that specification.	编者草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`aspect-ratio` Experimental	Chrome 部分支持 79 注意事项部分支持 79 注意事项注意事项 Chrome 79 adds internal support only for mapped values	Edge 部分支持 79 注意事项部分支持 79 注意事项注意事项 Edge 79 adds internal support only for mapped values	Firefox 部分支持 71 注意事项部分支持 71 注意事项注意事项 Firefox 71 adds internal support only for mapped values 不支持 69 — 71 注意事项 Disabled 注意事项 Firefox 69 adds internal support only for mapped values Disabled ). To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 不支持 No	Safari 部分支持 14 注意事项部分支持 14 注意事项注意事项 Safari 14 adds internal support only for mapped values	WebView Android 部分支持 79 注意事项部分支持 79 注意事项注意事项 Webview 79 adds internal support only for mapped values	Chrome Android 部分支持 79 注意事项部分支持 79 注意事项注意事项 Chrome 79 adds internal support only for mapped values	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 部分支持 14 注意事项部分支持 14 注意事项注意事项 Safari 14 adds internal support only for mapped values	Samsung Internet Android 部分支持 12.0 注意事项部分支持 12.0 注意事项注意事项 Samsung Internet 12.0 adds internal support only for mapped values
Internal mapping of width and height Experimental	Chrome 完整支持 79	Edge 完整支持 79	Firefox 完整支持 71 完整支持 71 不支持 69 — 71 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 完整支持 14	WebView Android 完整支持 79	Chrome Android 完整支持 79	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 完整支持 14	Samsung Internet Android 完整支持 12.0

图例

完整支持
部分支持
不支持
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。

另请参阅

元数据

最后修改： Oct 13, 2020

CSS
CSS 参考
CSS Basic User Interface
指南
1. Using URL values for the cursor property
特性
1. appearance (-moz-appearance, -webkit-appearance)
2. aspect-ratio
3. box-sizing
4. caret-color
5. cursor
6. ime-mode
7. outline
8. outline-color
9. outline-offset
10. outline-style
11. outline-width
12. resize
13. text-overflow
14. user-select

在此页

值