【第2201期】在Chromium、Safari预览版和Firefox Nightly中支持新的宽高比CSS属性

前言

新的一年，前端早读课继续陪伴你。在【第2200期】Chrome 88 重要更新解读有提到aspect-ratio属性，今天可以来看看新老方案。今日前端早读课文章由@飘飘翻译投稿分享。

正文从这开始~~

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

保持一致的宽高比(称为宽高比)对于响应式web设计和防止累积布局移位至关重要。现在，有一种更直接的方法可以实现这一点，即在Chromium 88、Firefox 87和Safari技术预览版118中启动新的aspect-ratio属性。

宽高比

宽高比最常见的表示方式是两个整数和一个冒号，尺寸为：宽：高，或x：y。摄影中最常见的宽高比是4:3和3:2，而视频和相机则倾向于16:9的宽高比。

两张宽高比相同的图片。一张是634 x 951px，另一张是200 x 300px。两者的宽高比都是2:3。

随着响应式设计的出现，保持宽高比对Web开发人员来说越来越重要，尤其是当图像尺寸不同，元素大小随着可用空间的变化而变化时。

以下例子说明了保持宽高比的重要性:

• 创建响应式iframe，其宽度为父级的100%，而高度应保持特定的视口比例。

• 为图片、视频和嵌入创建内部占位容器，以防止在项目加载和占用空间时重新布局。

• 为交互式数据可视化或SVG动画创建统一的、响应性强的空间。

• 为多元素组件（如卡片或日历日期）创建统一的、响应性强的空间。

• 为不同尺寸的多个图像创建统一的响应空间（可与object-fit一起使用）。

Object-fit

定义宽高比有助于我们在响应式上下文中调整媒体的大小。这个框中的另一个工具是object-fit属性，它允许用户描述一个块中的对象（如图像）应该如何填充该块。

展示各种Object-fit值

Codepen：https://codepen.io/una/pen/mdrLGjR

initial值和fill值重新调整图像以填充空间。在例子中，这导致图像被挤压和模糊，因为它重新调整了像素。object-fit: cover 使用图像的最小尺寸来填充空间，并根据这个尺寸裁剪图像以适应它。object-fit: contain 确保整个图像总是可见的，因此与cover相反，它采用最大边界的尺寸（在上面的例子中是宽度），并调整图像的大小以保持其固有的宽高比，同时适应空间。object-fit: none的情况下，图像以其自然尺寸在中心（默认对象位置）进行裁剪。

object-fit: cover 往往在大多数情况下都能确保在处理不同尺寸的图像时有一个很好的统一界面，但是，这种方式会丢失信息（图像在其最长的边缘被裁剪）。

如果这些细节很重要（例如，当使用美容产品的平面时），裁剪重要内容是不可接受的。所以，理想的情况是采用不同尺寸的响应式图片，以适应UI空间，而不需要裁剪。

老方法：用padding-top来保持宽高比

使用 padding-宽高 在 carousel 中设置后预览图像的宽高比为1:1。

为了使这些更有响应性，我们可以使用宽高比。允许我们设置一个特定的比例大小，并将媒体的其余部分基于一个单独的轴（高度或宽度）。

目前一个被广泛接受的基于图像宽度来保持宽高比的跨浏览器解决方案被称为 "Padding-Top Hack"。这个解决方案需要一个父容器和一个绝对放置的子容器。然后计算出宽高比的百分比来设置为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%。

现在我们已经确定了宽高比值，我们可以将其应用到我们的父容器中。考虑下面的例子。

1. <div class="container">

2. <img class="media" src="..." alt="...">

3. </div>

然后我们可以写出以下CSS。

1. .container {

2. position: relative;

3. width: 100%;

4. padding-top: 56.25%; /* 16:9 Aspect Ratio */

5. }

6. .media {

7. position: absolute;

8. top: 0;

9. }

用宽高比来维持宽高比

在 carousel 中使用宽高比设置后预览图像的1:1宽高比

不幸的是，计算这些padding-top值并不是很直观，需要一些额外的开销和定位。有了新的内置 aspect-ratio CSS属性，维护宽高比的语言就清晰多了。

用同样的标记，我们可以用aspect-ratio16/9代替padding-top: 56.25%，将aspect-ratio设置为指定的width/height。

使用 padding-top

1. .container {

2. width: 100%;

3. padding-top: 56.25%;

4. }

使用 aspect-ratio

1. .container {

2. width: 100%;

3. aspect-ratio: 16 / 9;

4. }

使用 aspect-ratio 代替 padding-top 更加清晰，并且不会修改padding属性来做一些超出其通常作用域的事情。

这个新属性还增加了将宽高比设置为auto的功能，其中 "内置宽高比的替换元素使用该宽高比; 否则盒子没有首选的宽高比。"。如果同时指定了auto和 <ratio>，则首选的宽高比是指定的width除以height的比例，除非它是具有内置宽高比的替换元素，在这种情况下，使用宽高比代替。

例如：网格中的一致性

这对于CSS布局机制（如CSS Grid和Flexbox）也非常有效。考虑一个带有子元素的列表，你想保持1:1的宽高比，比如赞助商图标的网格。

1. <ul class="sponsor-grid">

2. <li class="sponsor">

3. <img src="..." alt="..."/>

4. </li>

5. <li class="sponsor">

6. <img src="..." alt="..."/>

7. </li>

8. </ul>

1. .sponsor-grid {

2. display: grid;

3. grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

4. }

5. .sponsor img {

6. aspect-ratio: 1 / 1;

7. width: 100%;

8. object-fit: contain;

9. }

在网格中的图像，其父元素具有不同的宽高比尺寸。

codepen：https://codepen.io/una/pen/PoGddaw

例子：防止布局移位

高宽比的另一个重要特性是，它可以创建占位符空间，以防止累积布局移位，并提供更好的Web Vitals。在第一个例子中，从诸如 Unsplash 之类的 API 加载资源，当媒体加载完成后会产生布局变化。

视频的布局移位发生时，没有设置宽高比的负载资源。这个视频是用一个仿真的3G 网络录制的。

另一方面，使用高宽比会创建一个占位符来防止这种布局偏移。

1. img {

2. width: 100%;

3. aspect-ratio: 8 / 6;

4. }

在已加载的资源上设置视频的宽高比。这个视频是用模拟的3G网络录制的。Codepen：https://codepen.io/una/pen/GRjLZmG

额外的提示：图像属性的宽高比

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

对于我们上面的例子，知道尺寸是800px×600px，图像标记就会像这样。<imgsrc="image.jpg"alt="..."width="800"height="600">。如果发送的图片具有相同的宽高比，但不一定是精确的像素值，仍然可以使用图像属性值来设置比例，结合width：100%的样式，使图像占据适当的空间。综合起来就会是这样的:

1. <!-- Markup -->

2. <img src="image.jpg" alt="..." width="8" height="6">

1. /* CSS */

2. img {

3. width: 100%;

4. }

最后，效果和通过CSS设置图片的aspect-ratio是一样的，而且避免了布局的偏移。codePen：https://codepen.io/una/pen/gOwJWoz

结论

在多个现代浏览器中，有了新的aspect-ratio CSS属性，在你的媒体和布局容器中保持适当的宽高比变得更加简单。

关于本文 原文：https://web.dev/aspect-ratio/

为你推荐

欢迎自荐投稿，前端早读课等你来