第 9 课 10 / 25 | 编码:L09-12b
核心知识

cover 与 contain:铺满还是完整显示

同一张 2∶1 的舞台图放进比例不同的卡片,两种策略保留的画面不同。

cover:等比缩放到铺满

background-size: cover;
background-position: center;

不留未覆盖的区域;图片超出部分可能被裁剪。

contain:等比缩放到全部放下

background-size: contain;
background-repeat: no-repeat;

完整保留图片;可能露出底色,需配合不平铺。

思考:含完整演出安排的海报,适合直接用 cover 吗?

不宜只追求铺满。若文字或人物位于裁剪区域,就会丢失信息;可用 img 完整展示海报,并另提供可读取的活动文字。装饰图可以裁剪,但也应检查构图。

打开演示,切换尺寸、位置和平铺(新标签页)