CSS - aspect-ratio 属性

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>

打印本页