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

背景

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

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

实际业务效果

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

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

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

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

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

组件文档

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

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

相关推荐
默_笙4 分钟前
🏝 Docker 就是"房地产开发":从施工图纸到小区物业的容器化指南
前端·javascript
kyriewen7 分钟前
我手写了个极简版 React Router——才搞懂 v6 为什么砍了这么多 API
前端·javascript·程序员
a11177613 分钟前
Shirone 二次元博客主题 开源
前端·开源
IT_陈寒25 分钟前
Python的切片赋值把我坑惨了,这不是bug是特性
前端·人工智能·后端
掘金酱29 分钟前
【社区公告】致每一位掘友:关于这次调整, 想再说几句
前端·人工智能
CoderLiu30 分钟前
程序化工具调用(PTC)与动态工作流引擎:深入大模型工具调用的架构演进与实践
前端·人工智能·后端
码农胖大海41 分钟前
我的第一个产品,只有一段提示词
前端·ai编程·产品
邋遢道1 小时前
# 企业级 Agent 从 0 到 1(二):技术选型与最小骨架
前端·chrome
计算机魔术师1 小时前
我看了 OpenAI 首席科学家的最新长文,把原来的认知推翻了一遍
前端
乱码三千2 小时前
使用ComfyUI+MinMax-H3音视频模型生成视频
前端·后端·github