js如何改变图片比例

Question

昨天面试，面试官问了我一个问题，就是用户上传了一张不是一比一比例的图片，你如何把这张图片设置成一比一且不变形

Answer 1

只能让它显示不完全啊，设置一个父元素，宽高等比固定，新建image对象，在对象的onload事件里获取宽高，如果高大设置宽为父元素宽，反之设置高为父元素高，添加到父元素

Answer 2

1.获取图片宽高
2.已宽或高最大一个为基准
3.用canvas绘制
4.保存图片

Answer 3

！我觉得问的是 图片截取吧
例如微信上传头像，图片是长方形1:2的尺寸， 都会有个1:1的正方形，来截取图片

这样就比较符合你的问题，设置‘1比1不变形’，设置的话 感觉只能是图片截取
至于图片截取简单点就是两个方法
1、前端处理-canvas绘图，进行截取
2、后端处理-对应坐标给到程序，程序来截图后，把新的图片资源反馈给你

祝早日解决问题！

Answer 4

• background-size: cover;
• 前端裁切
• 后端图片裁切服务
• 图像算法，调整比例且视觉不违和

Answer 5

要让不是1:1的图片保存为1:1 只有两种方法啊。要么图片截取 要么留白（比如200100的图片设置父元素为200200 然后图片居中上下留白，具体js就像1楼说的 高大设置宽为父元素宽，反之设置高为父元素高，添加到父元素）

Answer 6

object-fit： cover； 一个css3属性搞定