CSS - aspect-ratio 属性

CSS 的aspect-ratio属性定义了元素盒子的期望宽高比。当父容器或视口大小改变时，此属性非常有用，浏览器会重新调整元素的尺寸以保持宽高比。

语法

aspect-ratio: auto | number (width) / number (height) | initial | inherit;

属性值

值	描述
auto	指定不设置特定比例。
number / number	第一个数字指定宽度，第二个数字指定高度的纵横比。如果没有指定数字，则默认为 1。
initial	将属性设置为其初始值。
inherit	从父元素继承属性。

CSS Aspect Ratio 属性示例

以下示例解释了使用不同值的aspect-ratio属性。

使用 auto 值的纵横比

如果不需要保持特定的宽高比，我们可以简单地使用 auto 值，它指定不强制执行严格的宽高比。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid red;
         width: 300px;
         aspect-ratio: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS aspect-ratio Property
   </h2>
   <img src="/css/images/orange-flower.jpg" alt="flower-image">
</body>

</html>

使用宽度和高度值的纵横比

为了保持固定的宽高比，我们可以指定宽度和高度值。如果未提及高度值，则将其视为 1。以下示例显示了不同的纵横比。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div img {
         display: block;
         margin: 15px;
      }

      #img1 {
         border: 5px solid red;
         width: 300px;
         aspect-ratio: 1/1;
      }

      #img2 {
         border: 5px solid red;
         width: 300px;
         aspect-ratio: 4/3;
      }

      #img3 {
         border: 5px solid red;
         width: 300px;
         aspect-ratio: 16/9;
      }
   </style>
</head>

<body>
   <h2>
      CSS aspect-ratio Property
   </h2>
   <div>
      <label>Square size (1:1) aspect ratio</label>
      <img src="/css/images/orange-flower.jpg" 
      alt="flower-image" id="img1">
      <label>Standard size (4:3) aspect ratio</label>
      <img src="/css/images/orange-flower.jpg" 
      alt="flower-image" id="img2">
      <label>Widescreen size (16:9) aspect ratio</label>
      <img src="/css/images/orange-flower.jpg" 
      alt="flower-image" id="img3">
   </div>

</body>

</html>

支持的浏览器

属性
aspect-ratio	88	88	89	15	74

css_properties_reference.htm

打印页面