新增的 CSS 属性,有助于在自适应布局中保持间距。
宽高比
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
宽高比最常见的形式是两个整数和一个冒号(以下维度): 宽度:高度或 x:y。最常用的摄影宽高比为 4:3 和 3:2,而视频 而较新款的消费类相机则通常采用 16:9 的宽高比。
<ph type="x-smartling-placeholder">![宽高比相同的两张图片。一个为 634 x 951 像素,另一个为 200 x 300 像素。两者的宽高比均为 2:3。](https://web.developers.google.cn/static/articles/aspect-ratio/image/two-images-the-same-aspe-c70cc7ed740f8.jpg?authuser=7&hl=ro)
随着自适应设计的出现,保持宽高比对于 尤其是当图片尺寸不同且元素大小会根据可用的 空间。
保持宽高比至关重要的一些示例包括:
- 创建自适应 iframe,其宽度与父项的 100% 相同,高度应保持不变 特定的视口比例
- 为图片、视频和嵌入内容创建固有占位符容器 以防止在内容加载并占用空间时重新布局
- 为交互式数据可视化或 SVG 动画创建统一的响应空间
- 为卡片或日历日期等多元素组件创建统一的自适应空间
- 为多张不同尺寸的图片创造统一的自适应空间(可与
object-fit
)
对象适合
定义宽高比有助于我们在自适应上下文中调整媒体大小。这里的另一个工具
存储分区是 object-fit
属性,该属性可让用户描述某个对象(例如图片)
应填充该块:
![Object-fit 演示可视化](https://web.developers.google.cn/static/articles/aspect-ratio/image/object-fit-demo-visualiza-6e1b75de8297c.jpg?authuser=7&hl=ro)
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">![使用 padding-top 将轮播界面中的帖子预览图片设置为 1:1 的宽高比。](https://web.developers.google.cn/static/articles/aspect-ratio/image/using-padding-top-set-1-9702b5487f14c.jpg?authuser=7&hl=ro)
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">![使用宽高比为轮播界面中的帖子预览图片设置 1:1 的宽高比。](https://web.developers.google.cn/static/articles/aspect-ratio/image/using-aspect-ratio-set-e58f152775151.jpg?authuser=7&hl=ro)
aspect-ratio
为轮播界面中的帖子预览图片设置 1:1 的宽高比。遗憾的是,计算这些 padding-top
值不太直观,
额外的开销和位置。使用新的固有 aspect-ratio
CSS
属性:用于维护切面的语言
就要清晰得多了
使用相同的标记,我们可以将 padding-top: 56.25%
替换为 aspect-ratio: 16 / 9
,设置
aspect-ratio
设置为 width
/ height
的指定比率。
.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;
}
示例:防止布局偏移
aspect-ratio
另一个很棒的功能是,它可以创建占位符空间,
Cumulative Layout Shift,并提供更好的网页指标。在本专精课程
例如,从 Unsplash 等 API 加载资源时,系统会创建
媒体加载完成后布局偏移。
另一方面,使用 aspect-ratio
会创建一个占位符来防止这种布局偏移:
img {
width: 100%;
aspect-ratio: 8 / 6;
}
额外提示:用于设置宽高比的图片属性
设置图片宽高比的另一种方法是通过图片属性进行设置。如果您事先知道图片的尺寸,那么最佳做法是
将这些维度设为其 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 创立)。