CSS 属性

CSS aspect-ratio属性对于定义元素框所需的宽高比非常有用。这个属性很有用，当父容器或视口的大小发生变化时，浏览器会重新调整元素的尺寸，以保持宽高比。

在计算中很有用自动尺寸和其他布局功能。

盒子的最小尺寸应该是自动的，以便看到宽高比的效果。当宽度和高度都不是自动大小时，提供的宽高比不起作用。

属性值

宽高比属性可以具有以下值之一:

  • auto:替换的元素（如 <img>）使用固有的宽高比。

  • <ratio>:Box 的首选宽高比-ratio 是宽度/高度的比率。当高度和前面的斜线符号未指定时，默认为 1。它基于 box-sizing 指定的框的尺寸工作。

适用范围

除行内框和内部 ruby 或表格框之外的所有 html 元素。

语法

aspect-ratio = auto || <ratio>

<ratio> 是与宽度/高度比率相关的数字，例如9/4.

CSS 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="/css/images/red-flower.jpg" />
</body>
</html>

在上面的示例中，第一个 <img> 没有指定 src，并且以宽高比 = 5/2 显示；而第二个 <img> 已指定 src，并且以其自然的纵横比显示。 auto 是给定的后备选项。

CSS aspect-ratio: 纵横比

以下示例演示了使用固定宽度和高度的不同纵横比值作为 auto。

<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>