素材牛VIP会员
前端图片显示,如何最大程度的让其不压缩变形,同时又能铺满盒子?
 te***es  分类:JavaScript  人气:851  回帖:1  发布于6年前 收藏

很多项目都会有后台上传图片的功能,这导致往往用户会传一些不规则比例的图片(这个确实头疼,其实不只用户传图没有固定宽高比,前端样式上,图片盒子也很难保证一个通用的比例),也就导致了有些超出比例的图片在前端显示的时候会出现压缩,拉伸,变形问题。
现在项目通过阿里云储存能够实现一些基本的图片缩放,裁剪处理,但是很显然,在严重超出前端图片盒子比例的情况下,仍然会有拉伸变形问题。
我这边的处理方法总结了一下,只能做到两步:
1 阿里云裁剪,压缩。
2 图片居中自适应,即:img{max-width:100%;max-heightt:100%}。
如上问题所述,当原图宽高比例严重不符的时候仍然会存在问题。
我能想到的方式还有一种就是把图片作为图片盒子的背景,然后居中铺满,但是很显然,工作量大,改动多(因为框架用的vue,拉取数据后还得绑定样式)。
问:
有没有更好的方式能达到最大化的图片显示优化?请指教

 标签:csshtmljavascript

讨论这个帖子(1)垃圾回帖将一律封号处理……

Lv6 码匠
生***炸 UI设计师 6年前#1

上传的时候记录图片尺寸
前台拿到图片的尺寸就好处理样式了

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取