一种前端硬编码图片扩写方案

背景

当研发在图片宽高比与容器宽高比不一致的情况下实现Banner,cover 模式下会导致 banner 不完全可见, contain 模式下会导致页面空白,在业务中为了避免这类情况,我们就会要求运营配置固定宽高比的图片。

本文通过一种前端硬编码图片扩写方案对 banner 分辨率进行适配,设置容器宽高后,banner 会进行自适应渲染,有 banner 需求的同学可以体验一下

实际业务效果

大屏幕优化前 大屏幕优化后

同时也可以用来对 banner 效果做一些 ui 改版

UI 改版前, 仔细看的话可以发现由于图片宽高比与容器宽高比不完全一致,图片内容有被拉伸的情况

UI 改版后,图片内容未被拉伸

可在此处替换图片 url 快速体验适配效果。 体验链接

组件文档

希望它能对大家的业务场景有用

如果你觉得有用,不妨给个 Star !!!, 谢谢

相关推荐
金花顺5 小时前
android_media_AudioTrack
前端·面试
木公子5 小时前
Vue3源码精读04:Scheduler 调度器深度解析|异步批量更新与任务队列源码全解
前端·vue.js
YHL5 小时前
🧠 React useContext 深度解析:告别 Props 层层传递的噩梦
前端·react.js
萧行之5 小时前
Observalble Plot和图形语法理论
前端·数据可视化
开开心心就好5 小时前
手机悬屏翻译工具外语游戏漫画APP全覆盖
android·前端·javascript·python·游戏·pdf·html
支支დ6 小时前
Phind 前端特定优势:AI 编程助手的体验革新
前端
DDXYcoder6 小时前
万字解析动态内存从编译到运行
java·前端·算法
光影少年6 小时前
react navite封装一个RN 通用按钮组件
前端·javascript·react native·react.js·前端框架
晴天166 小时前
CSS 预处理器深度解析-Day35
前端·css
恋猫de小郭6 小时前
AI 时代,也许你的 Flutter 需要一套 Dartastic OpenTelemetry 监控
android·前端·flutter