新的宽高比(aspect-ratio)CSS属性
在响应式网页设计中,保持一致的宽高比,即所谓的长宽比,对于防止布局的累积偏移至关重要。现在,有了Chromium 88、Firefox 87和Safari技术预览版118中推出的新宽高比属性,有了更直接的方法来实现这一目标。
长宽比
长宽比最常见的表示方式是两个整数和一个冒号,尺寸为:宽:高,或x:y。摄影最常见的长宽比是4:3和3:2,而视频和最近的消费类相机则倾向于16:9的长宽比。
具有相同长宽比的两个图像。一个是634 x 951像素,另一个是200 x 300像素。两者的长宽比均为2:3
随着响应式设计的到来,对于Web开发人员而言,保持宽高比已变得越来越重要,尤其是当图像尺寸不同且元素大小根据可用空间而变化时。
保持宽高比变得重要的一些示例是:
- 创建自适应iframe,它们是父级宽度的100%,高度应保持特定的视口比例
- 为图像,视频和嵌入创建内在的占位符容器,以防止在项目加载并占用空间时重新布局
- 为交互式数据可视化或SVG动画创建统一的、响应式空间
- 为多元素组件(如卡片或日历日期)创建统一、响应的空间
- 为不同尺寸的多个图像创建统一的响应空间(可与 object-fit 配合使用)
Object-fit
定义宽高比有助于我们在响应式上下文中确定媒体的大小。这个桶中的另一个工具是对象拟合属性,它使用户能够描述一个块中的对象(如图像)应该如何填充该块。此存储桶中的另一个工具是 object-fit 属性,该属性使用户能够描述块中的对象(例如图像)应如何填充该块:
initial 和 fill 会重新调整图像以填充空间。在我们的示例中,由于重新调整像素,这会导致图像被压扁和模糊。object-fit:cover 使用图像的最小尺寸填充空间,并根据此尺寸裁剪图像以适合该尺寸。object-fit: contain 确保整个图像始终可见,因此与 cover 相反,它采用最大边界的大小(在我们上面的例子中是宽度),并调整图像的大小,以保持其固有的纵横比,同时适应空间。object-fit: none 的情况下,图像会以其自然大小在中心位置(默认对象位置)被裁剪。
object-fit:cover 在大多数情况下,封面往往可以确保在处理不同尺寸的图像时有一个很好的统一界面,但是,这样一来,你就会失去信息(图像在其最长的边缘被裁剪)。
如果这些细节很重要(例如,在处理美容产品的平铺时),裁剪重要内容是不可接受的。所以最理想的情况是采用大小不一的响应式图片,适合UI空间,不需要裁剪。
旧的技巧:使用padding-top保持宽高比
使用padding-top在轮播中的后期预览图像上设置1:1纵横比