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

背景

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

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

实际业务效果

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

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

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

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

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

组件文档

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

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

相关推荐
环境栈笔记3 分钟前
指纹浏览器安卓怎么用?从运行位置到功能验收,先把三种方案分清
前端·人工智能·后端·自动化
计算机魔术师21 分钟前
Anthropic IPO 招股文件披露近 9000 亿美元隐性债务
前端
chi113035 分钟前
【无标题】
前端·javascript·python
IT_陈寒1 小时前
JavaScript实战技巧总结:深挖数组遍历的性能陷阱与实战解法
前端·人工智能·后端
步行cgn2 小时前
为什么既要 web.xml 又要 springmvc.xml?能不能只配一个?
xml·前端·hive
风骏时光牛马2 小时前
大模型综合能力评测:多维度性能与对齐效果对比
前端
winfredzhang2 小时前
从零手写一个毛玻璃风格的页面搭建台:单文件 HTML 实现组件放置、面板磁吸与图层管理
前端·html
葡萄城技术团队10 小时前
1000 人协同压测的环境瓶颈排查:CPU 争用与 Wi\-Fi
前端
excel11 小时前
Marked 与 Markdown 有什么区别?该怎么选?
前端
Da Da 泓12 小时前
五子棋 Web 端测试用例报告
前端·网络·websocket·网络协议·测试用例·项目