aspect-ratio
aspect-ratio CSS 属性允许你定义元素盒子的所需宽高比。这意味着即使父容器或视口大小发生变化，浏览器也会调整元素的尺寸以保持指定的宽高比。指定的宽高比用于自动尺寸计算和一些其他布局功能。
为了让 aspect-ratio 生效，盒子的尺寸至少有一个需要是自动的。如果宽度和高度都不是自动尺寸，则提供的宽高比对盒子的首选尺寸没有影响。
试一试
aspect-ratio: auto;
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;
<section id="default-example">
<img
class="transition-all"
height="640"
id="example-element"
src="/shared-assets/images/examples/plumeria.jpg"
width="466" />
</section>
#example-element {
height: 100%;
width: auto;
}
语法
aspect-ratio: 1 / 1;
aspect-ratio: 1;
/* fallback to 'auto' for replaced elements */
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;
/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;
此属性指定为关键字 auto 或 <ratio> 之一或两者。如果两者都给定，并且元素是替换元素，例如 <img>，则在内容加载之前使用给定的比例。内容加载后，将应用 auto 值，因此将使用加载内容的固有宽高比。
如果元素不是替换元素，则使用给定的 ratio。
值
auto-
具有固有宽高比的替换元素使用该宽高比，否则盒子没有首选宽高比。涉及固有宽高比的尺寸计算始终使用内容框尺寸。
<ratio>-
盒子的首选宽高比是指定的
width/height比例。如果省略height和前面的斜杠字符，height默认为1。涉及首选宽高比的尺寸计算使用由box-sizing指定的盒子尺寸。 auto && <ratio>-
当
auto和<ratio>一起指定时，如果元素是具有自然宽高比的替换元素（如<img>元素），则使用auto。否则，将使用指定的width/height比例作为首选宽高比。
正式定义
正式语法
aspect-ratio =
auto ||
<ratio>
<ratio> =
<number [0,∞]> [ / <number [0,∞]> ]?
示例
探索固定宽度下的宽高比效果
在此示例中，<div> 元素的宽度已设置为 100px，高度设置为 auto。由于宽度值在此处是固定的，因此 aspect-ratio 属性仅影响 <div> 元素的高度，以保持指定的宽高比。
div {
width: 100px;
height: auto;
}
div:nth-child(1) {
aspect-ratio: 1/1;
}
div:nth-child(2) {
aspect-ratio: 0.5;
}
div:nth-child(3) {
aspect-ratio: 1;
}
div:nth-child(4) {
aspect-ratio: 1/0.5;
}
div:nth-child(5) {
aspect-ratio: 16/9;
}
回退到自然宽高比
在此示例中，我们使用两个 <img> 元素。第一个元素未将其 src 属性设置为图像文件。
<img src="" /> <img src="plumeria.jpg" />
以下代码将 3/2 设置为首选宽高比，并将 auto 设置为回退。
img {
display: inline;
width: 200px;
border: 2px dashed red;
background-color: lime;
vertical-align: top;
aspect-ratio: 3/2 auto;
}
请注意，第一个没有替换内容的图像保持 3/2 的宽高比，而第二个图像在内容加载后使用图像的自然宽高比。
规范
| 规范 |
|---|
| CSS Box Sizing Module Level 4 # aspect-ratio |
浏览器兼容性
加载中…