前端图片显示，如何最大程度的让其不压缩变形，同时又能铺满盒子？

Question

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

Answer 1

对img使用css object-fit: contain;

Answer 2

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

Answer 3

你说的用背景图的方式是最快捷的 可以依然用img 然后用js去转换成背景图并隐藏img
如果一定要用img 就要把img做成绝对定位
然后获取图片的比例 比例相对于容器是偏扁的就给一个horizontal的class 反之给一个vertical的class
horizontal的img就高度100% 宽度自动 用transform水平居中
vertical的img就宽度100% 高度自动 用transform垂直居中

Answer 4

object-fit属性

虽然不能做到ie9以下的兼容问题。希望对你有用

Answer 5

还是建议把裁剪压缩放到前端，这样上传到后台的时间相对比较稳定，另外用户端完全可以在图片处理后再显示，可以保证宽和高里有一个是确定的，图片外边加个容器就可以实现固定尺寸了。