背景
当研发在图片宽高比与容器宽高比不一致的情况下实现Banner,cover 模式下会导致 banner 不完全可见
, contain 模式下会导致页面空白
,在业务中为了避免这类情况,我们就会要求运营配置固定宽高比的图片。
本文通过一种前端硬编码图片扩写方案对 banner 分辨率进行适配,设置容器宽高后,banner 会进行自适应渲染,有 banner 需求的同学可以体验一下
实际业务效果
大屏幕优化前 | 大屏幕优化后 |
---|---|
同时也可以用来对 banner 效果做一些 ui 改版
UI 改版前, 仔细看的话可以发现由于图片宽高比与容器宽高比不完全一致,图片内容有被拉伸的情况
。
UI 改版后,图片内容未被拉伸
可在此处替换图片 url 快速体验适配效果。 体验链接
组件文档
希望它能对大家的业务场景有用