由Chromium、Safari技术预览和Firefox Nightly支持的CSS属性新的宽高比

新的CSS属性有助于在响应式布局中保持间距。

概述:保持一致的宽和高的比例（也就是宽高比），对于响应式Web设计和防止布局偏移来说至关重要。现在，有了一种更简单的方法，大家可以在 Chromium 88，Firefox 87和 Safari Technology Preview 118中启动新的宽高比属性。

长宽比通常用两个整数和一个冒号表示，代表其尺寸为：宽度：高度或者x：y。 摄影最常见的宽高比是4：3和3：2，而视频和最近的相机 app 往往是16：9的宽高比。

这两张图片前者是634 x 951px，另一个是200 x 300px，但宽高比都是2:3。

随着响应式设计的到来，对于Web开发人员而言，保持宽高比已变得越来越重要，尤其是在当图像尺寸不同且元素大小根据可用空间而变化的情况。

表示宽高比重要性的示例如下：

• 创建自适应iframe，它们的原始宽度是100％，高度应保持特定的视口比例。
• 为图像、视频和嵌入创建固有的占位符容器，防止项目加载并占用空间时重新布局。
• 为可视化交互数据或SVG动画创建统一的响应空间
• 为卡片或日历日期等多元素组件创建统一的响应空间
• 为不同尺寸的多个图像创建统一的响应空间（可与对象配合使用）

对象适应性

定义宽高比有助于我们在响应的上下文中调整媒体大小， 这个存储桶中的另一个工具是对象拟合属性，它帮助用户能够描述一个块中的对象（如图像）应该如何填充该块。：

初始值和填充值会重新调整图像来填充空间。 在我们的示例中，因为它会重新调整像素，会导致图像被压扁或者看起来模糊， 所以这不是理想中的宽高比。 object-fit: cover 用图像的最小尺寸填充空间，并根据此尺寸裁剪图像以适应它。object-fit: contain 确保整个图像总是可见的，因此，与cover相反，它使用最大边界的尺寸（在我们上面的例子中是宽度），并调整图像的大小，以保持其固有的纵横比，同时适应空间。object-fit: none情况下，显示的是图像在其中心（默认对象位置）以自然尺寸裁剪。

object-fit ：在大多数情况下，封面往往可以确保在处理不同尺寸的图像时有一个很好的统一界面，但是，这样一来，你可能会会失去一部分图像（图像最长的边缘被裁剪）。

如果这些细节很重要（例如，在平整放置美容产品时），那么裁剪重要内容是不行的。 因此，理想的情况是在不裁剪的情况下，适合UI空间的各种大小的自适应图像。

利用 padding-top 设置1：1的宽高比在传送带内提交预览图像。

为了让响应速度更快，我们可以使用纵横比。设置一个特定的比例大小，并将图片的其他部分基于一个单独的轴（高度或宽度）。

目前，一种基于图像宽度来保持宽高比的跨浏览器解决方案收到开发者欢迎，大家叫它“ Padding-Top Hack”。 该解决方案需要一个父容器和一个绝对放置的子容器。 然后，可以将宽高比计算为百分比以设置为padding-top。 例如：

1：1长宽比= 1/1 = 1 =顶部填充：100％

4：3长宽比= 3/4 = 0.75 =顶部填充：75％

3：2长宽比= 2/3 = 0.66666 =顶部填充：66.67％

16：9长宽比= 9/16 = 0.5625 =顶部填充：56.25％

现在，我们已经确定了宽高比值，可以将其应用于父容器。 具体如以下示例：

iv class="container">
  <img class="media" src="..." alt="...">
</div>

然后，我们可以编写CSS：

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

使用 aspect-ratio 保持宽高比

利用 padding-top 设置1：1的宽高比在传送带内提交预览图像。

缺点是，计算这些 padding-top 值不是很直观，并且需要 一些额外的开销和定位。 有了新的固有 aspect-ratio CSS 属性，用于保持宽高比的语言就更加清晰了。

使用相同的标记，我们可以替换：宽高比为 16/9的是56.25％的 padding-top ，将 aspect-ratio 设置为指定的宽高比。

使用padding-top

.container {
  width: 100%;
  padding-top: 56.25%;
}

使用宽高比

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

使用 aspect-ratio 代替 padding-top 会变得更加清晰，并且不会检查 padding属性以执行其通常范围之外的操作。

此新属性还增加了将宽高比设置为 auto 的功能，这替代了具有固有宽高比的元素；否则，该框没有首选的宽高比”。 如果同时指定了 auto 和 <ratio> ，则择优的宽高比是指定的宽度与高度之比，除非它是具有固有宽高比的替换元素，在这种情况下，将使用宽高比。

示例：网格中的一致性

这对于CSS布局机制（例如CSS Grid和Flexbox）也非常有效。 考虑一个列表，其中包含你要保持1：1宽高比的子级，例如赞助商图标网格：

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

原视频链接：https://storage.googleapis.com/web-dev-assets/aspect-ratio/gridimages2.mp4
具有不同宽高比尺寸的父元素的网格中的图像。参见Codepen上的演示

示例：防止布局偏移

aspect-ratio 的另一 个重要功能是它可以创建占位符空间，以防止累积布局偏移并提供更好的Web Vitals。 在第一个示例中，当媒体加载完成时，诸如Unsplash之类的API加载资产会创建布局偏移。

原视频链接：https://storage.googleapis.com/web-dev-assets/aspect-ratio/aspect-ratio-missing.mp4
在加载的资产上未设置长宽比时发生的累积布局偏移的视频。该视频是使用模拟的3G网络录制的。

使用 aspect-ratio ，而另一方面，创建一个占位符，以防止这种布局的转变：

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

原视频链接：https://storage.googleapis.com/web-dev-assets/aspect-ratio/aspect-ratio-set.mp4

在加载的资产上设置了具有设置的宽高比的视频。该视频是使用模拟的3G网络录制的。参见Codepen上的演示。

提示：宽高比的图片属性＃

设置图像长宽比的另一种方法是通过图像属性来设置。 如果你提前知道图像的尺寸，最好的办法是将这些尺寸设置为它的宽度和高度。

对于上面的示例，已知尺寸为800px x 600px，则图像标记如下所示： <img src="image.jpg" alt="..." width="800" height="600"> 。 如果发送的图像具有相同的宽高比，但不一定具有确切的像素值，我们仍然可以使用图像属性值来设置该比例，并结合 width: 100% ， 以便图像占据适 当的空间。 总共看起来像：

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
}

最后，效果与通过CSS在图像上设置的宽高比相同，并且避免了累积的布局偏移（请参阅Codepen上的演示）。

结论

有了新的 aspect-ratio CSS 属性，可以在多个浏览器中启动，并且在媒体和布局容器中保持适当的宽高比变得更加简单。
艾米·史蓝芬（Amy Shamblen）和莱昂内尔·古斯塔夫（Lionel Gustave）通过通过Unsplash拍摄的照片。

原文作者 Una Kravets
原文链接 https://web.dev/aspect-ratio/