核心知识
cover 与 contain:铺满还是完整显示
同一张 2∶1 的舞台图放进比例不同的卡片,两种策略保留的画面不同。
cover:等比缩放到铺满
background-size: cover;
background-position: center;
不留未覆盖的区域;图片超出部分可能被裁剪。
contain:等比缩放到全部放下
background-size: contain;
background-repeat: no-repeat;
完整保留图片;可能露出底色,需配合不平铺。
思考:含完整演出安排的海报,适合直接用 cover 吗?
不宜只追求铺满。若文字或人物位于裁剪区域,就会丢失信息;可用 img 完整展示海报,并另提供可读取的活动文字。装饰图可以裁剪,但也应检查构图。