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

背景

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

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

实际业务效果

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

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

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

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

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

组件文档

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

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

相关推荐
AICoder码农王12 分钟前
Vitest 实战:从一个真实项目看懂测试套件
前端·前端框架
律宏阔21 分钟前
Electron Forge 在 macOS M4 打包踩坑:Node.js 26 导致 make 异常中断
前端
木木爱研究24 分钟前
elpis-里程碑四-基于Vue完成动态组件库建设
前端·后端
深念Y27 分钟前
Nuxt 项目 Docker 构建:从 pnpm+node 迁移到全 bun
java·前端·docker
qq_4260039628 分钟前
UI自动化元素定位不到解决方案
前端·pycharm·自动化
EthanChou202034 分钟前
AES67协议笔记
前端·笔记·es6
马优晨36 分钟前
pom.xml 中 jquery webjars 依赖解释
xml·前端·jquery·jquery webjars·webjars依赖
里欧跑得慢1 小时前
AI 驱动的 UI 国际化方案自动适配:从单一语言到多语言布局的智能转换
前端·css·flutter·web
DolitD1 小时前
云流技术深度剖析:单服务器下如何实现3D应用的多实例并发?
java·服务器·前端·3d·云原生·云计算
芦柑4641 小时前
画布和3D导演台工具:短剧分镜从素材整理到空间预演的完整链路
服务器·前端·数据库