css3 aspect-ratio 属性详解

文章2021-12-21308 人已阅来源：网络

在响应式网页设计中，保持一致的宽高比，即所谓的长宽比，对于防止布局累积偏移至关重要。在 Chromium 88、Firefox 87 和 Safari Technology Preview 版本中推出了 aspect-ratio 属性，我们有了更直接的方法来实现这一目标。

Aspect ratio

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

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

例如

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

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

在一些场景下，维持长宽比显得非常的有用：

创建响应式 iframes，它们的宽度为父体的 100%，而高度应保持特定的视口比例。
为图片、视频和嵌入创建内在的占位容器，以防止项目加载时重新布局而占用空间。
为交互式数据可视化或 SVG 动画创建统一的、响应式的空间。
为多元素组件（如卡片或日历日期）创建统一的、响应的空间。
为不同尺寸的多幅图像创建统一的响应空间（可与 object-fit 一起使用）

Object fit

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

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

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

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