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

背景

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

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

实际业务效果

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

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

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

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

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

组件文档

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

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

相关推荐
ss27313 分钟前
AI全栈实战 | 3.5-01 Python 全栈前端最小集:不会 React 也能做出能看的后台,关键就一条线
前端·python·react.js
人工智能培训16 分钟前
数字孪生驱动大模型工业知识库:为具身机器人植入领域专业经验
大数据·linux·服务器·前端·人工智能
维克兜率天30 分钟前
【维克】通道突破:画出趋势的“轨道线“
前端·数据库·人工智能
Ai-_Man31 分钟前
从聊天框到正式文档:AI导出鸭瞄准AI大模型应用的“最后一公里”
开发语言·前端·javascript·人工智能·小程序
乌暮39 分钟前
拆解网页的底层逻辑:用费曼学习法讲透 HTML 与 CSS
前端·css·学习·html
陈随易10 小时前
bm2,Node.js 与 Bun 项目部署新选择
前端·后端·程序员
福兮说12 小时前
canvas 旋转图片的六个坑:四角被裁、Math.ceil 多出 1px 黑边、JPG 角发黑、翻转方向反了
前端·javascript·图像处理·canvas
传人once13 小时前
多图片上传预览功能如何写
前端·css·html·jquery·html5
Eric.4613 小时前
Wan‑Animate+MiniMax-H3 本地部署 AI 漫剧流水线:8G 显存动作迁移与动态分镜工程实战
前端·人工智能·comfyui·ai漫剧
库拉镜像AI牛牛15 小时前
短剧内容自动化生产:知漫剧工作室落地教程
大数据·服务器·前端·人工智能·语音识别