Chromium、Safari Technology Preview 和 Firefox Nightly 支持新的宽高比 CSS 属性

新增的 CSS 属性，有助于在自适应布局中保持间距。

Una Kravets

注意 ：摘要：保持一致的宽高比（称为宽高比）对于自适应网页设计以及防止累计布局偏移至关重要。现在，通过在 Chromium 88、Firefox 87 和 Safari Technology Preview 118 中推出的全新 aspect-ratio 属性，可以通过更直接的方式实现此目的。

宽高比

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 88
• <ph type="x-smartling-placeholder"></ph> 88
• <ph type="x-smartling-placeholder"></ph> 89
• <ph type="x-smartling-placeholder"></ph> 15

来源

宽高比最常见的形式是两个整数和一个冒号（以下维度）： 宽度:高度或 x:y。最常用的摄影宽高比为 4:3 和 3:2，而视频 而较新款的消费类相机则通常采用 16:9 的宽高比。

<ph type="x-smartling-placeholder">

</ph>

两张图片具有相同宽高比。一个为 634 x 951 像素，另一个为 200 x 300 像素。两者的宽高比均为 2:3。

随着自适应设计的出现，保持宽高比对于 尤其是当图片尺寸不同且元素大小会根据可用的 空间。

保持宽高比至关重要的一些示例包括：

• 创建自适应 iframe，其宽度与父项的 100% 相同，高度应保持不变 特定的视口比例
• 为图片、视频和嵌入内容创建固有占位符容器 以防止在内容加载并占用空间时重新布局
• 为交互式数据可视化或 SVG 动画创建统一的响应空间
• 为卡片或日历日期等多元素组件创建统一的自适应空间
• 为多张不同尺寸的图片创造统一的自适应空间（可与 object-fit)

对象适合

定义宽高比有助于我们在自适应上下文中调整媒体大小。这里的另一个工具 存储分区是 object-fit 属性，该属性可让用户描述某个对象（例如图片） 应填充该块：

<ph type="x-smartling-placeholder">

</ph>

显示各种 object-fit 值。请参阅 Codepen 上的演示。

initial 和 fill 值会重新调整图片以填充空间。在我们的示例中，这会导致 在重新调整像素时，图片将被挤压并变得模糊。不理想。object-fit: cover 人使用 用于填充空间的最小尺寸，然后根据此场景裁剪图片，使之适合图片大小 维度。它会“放大”最低边界处。object-fit: contain 可确保整个映像 始终可见，因此与 cover 相反，它采用最大边界的大小 （在上面的示例中为宽度），并调整图片大小以保持其固有宽高比 object-fit: none 用例显示在其中心位置剪裁的图片 （默认对象位置）。

在大多数情况下，object-fit: cover 往往可以确保实现良好的统一界面 但是，这样会让您丢失信息（图片裁剪为 最长边）。

如果这些细节很重要（例如，当使用平整的美容产品时）， 不接受剪裁重要内容。因此，理想的场景是 可适应界面空间的不同尺寸，无需剪裁。

老技巧：使用 padding-top 保持宽高比

<ph type="x-smartling-placeholder">

</ph>

使用 padding-top 为轮播界面中的帖子预览图片设置 1:1 的宽高比。

为提高这些屏幕的响应速度，我们可以使用宽高比。这样，我们可以设置 指定宽高比尺寸，并将媒体的其余部分基于单个轴（高度或宽度）。

根据图片的宽高比保持宽高比目前广接受的跨浏览器解决方案 也称为“上内边距”。此解决方案需要一个父级容器和一个 绝对放置的子容器。然后，以百分比形式计算宽高比 用作 padding-top。例如：

• 1:1 的宽高比 = 1 / 1 = 1 = padding-top: 100%
• 宽高比 4:3 = 3 / 4 = 0.75 = padding-top: 75%
• 宽高比为 3:2 = 2 / 3 = 0.66666 = padding-top: 66.67%
• 宽高比：16:9 = 9 / 16 = 0.5625 = padding-top: 56.25%

确定宽高比值后，我们可以将其应用于父级容器。 请参考以下示例：

<div 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 保持宽高比

<ph type="x-smartling-placeholder">

</ph>

使用 aspect-ratio 为轮播界面中的帖子预览图片设置 1:1 的宽高比。

遗憾的是，计算这些 padding-top 值不太直观， 额外的开销和位置。使用新的固有 aspect-ratio CSS 属性：用于维护切面的语言 就要清晰得多了

使用相同的标记，我们可以将 padding-top: 56.25% 替换为 aspect-ratio: 16 / 9，设置 aspect-ratio 设置为 width / height 的指定比率。

使用 padding-top

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

使用宽高比

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

使用 aspect-ratio 代替 padding-top 会更加清晰，并且不会彻底改变内边距 属性执行超出其常规范围的操作。

这一新属性还增加了 将宽高比设置为 auto，其中“将元素替换为固有宽高比”将使用该宽高比 比率；否则框没有首选宽高比。”如果 auto 和 <ratio> 都符合 指定的宽高比为 width 除以 height 所得的值，除非 它已被替换的元素 固有宽高比，在这种情况下会改用宽高比。

示例：网格中的一致性

这也适用于 CSS 网格和 Flexbox 等 CSS 布局机制。考虑使用列表 但您希望保持 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;
}

网格中的图片及其父元素（采用各种宽高比尺寸）。查看 Codepen 上的演示。

示例：防止布局偏移

aspect-ratio 另一个很棒的功能是，它可以创建占位符空间， Cumulative Layout Shift，并提供更好的网页指标。在本专精课程 例如，从 Unsplash 等 API 加载资源时，系统会创建 媒体加载完成后布局偏移。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

视频：在已加载的素材资源未设置宽高比时发生的累计布局偏移。此视频是通过模拟的 3G 网络录制的。

另一方面，使用 aspect-ratio 会创建一个占位符来防止这种布局偏移：

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

在加载的素材资源上设置具有固定宽高比的视频。此视频是通过模拟的 3G 网络录制的。查看 Codepen 上的演示。

额外提示：用于设置宽高比的图片属性

设置图片宽高比的另一种方法是通过图片属性进行设置。如果您事先知道图片的尺寸，那么最佳做法是 将这些维度设为其 width 和 height。

对于上面的示例，如果尺寸为 800x600 像素，图片标记将如下所示：<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%;
}

最后，其效果就相当于将 aspect-ratio 通过 CSS 上传图片，并避免累积布局偏移（请参阅 Codepen 创建）。

总结

借助新的 aspect-ratio CSS 属性，您可以在多个现代浏览器中启动，并保持适当的 媒体和布局容器中的宽高比会更加简单直观。

照片提供者：Amy Shamblen 和 Lionel Gustave（通过 Un 创立）。