CSS aspect-ratio 属性在定义元素框的所需宽高比时很有用。当父容器或视口的大小发生变化时，此属性非常有用，浏览器将重新调整元素的尺寸，以保持宽高比。
它在计算自动尺寸和其他布局功能时很有用。
盒子的最小一个尺寸应该是自动的，以便看到 aspect-ratio 的效果。当宽度和高度都不是自动大小时，如果 aspect-ratio 不起作用。
可能的值
aspect-ratio 属性可以具有以下值之一：
- auto：替换的元素（如 <img> 使用固有的纵横比。
- <ratio>：盒子的首选纵横比是宽/高之比。如果未指定 height 和前面的斜杠符号，则默认为 1。它的工作原理是根据 box-sizinging 指定的箱子的尺寸。
适用于
除内联框和内部 ruby 或表格框之外的所有 html 元素。
语法
aspect-ratio = auto || <ratio>
<ratio>是与宽/高比率相关的数字，例如 9/4。
CSS aspect-ratio - 回退到自然 aspect-ratio
以下示例演示了使用其自然 aspect-ratio 加载图像以及如何声明回退选项。
<html>
<head>
<style>
img {
display: block;
width: 200px;
border: 3px dotted blue;
background-color: lightgreen;
margin-bottom: 5px;
aspect-ratio: 5/2 auto;
}
</style>
</head>
<body>
<p>with "5/2" aspect-ratio</p>
<img src="" />
<p>with "auto" aspect-ratio</p>
<img src="images/red-flower.jpg" />
</body>
</html>
在上面的示例中，第一个 <img> 没有指定 src，并且以 aspect-ratio = 5/2 显示;而第二个 <img> 指定了 src，并且以其自然的纵横比显示。auto 是给定的回退选项。
CSS aspect-ratio - 使用固定宽度的 aspect-ratio
以下示例演示了将固定宽度和高度设置为自动的不同 aspect-ratio 值。
<html>
<head>
<style>
#container {
display: inline-block;
width: 100px;
height: auto;
border: 2px solid blue;
background-color: yellow;
margin-right: 10px;
}
.sample1{
aspect-ratio: 5/2;
}
.sample2{
aspect-ratio: 0.5;
}
.sample3{
aspect-ratio: 2;
}
.sample4 {
aspect-ratio: 18/9;
}
</style>
</head>
<body>
<div id="container" class="sample1">aspect-ratio: 5/2</div>
<div id="container" class="sample2">aspect-ratio: 0.5</div>
<div id="container" class="sample3">aspect-ratio: 2</div>
<div id="container" class="sample4">aspect-ratio: 18/9</div>
</body>
</html>
