关于前端图片处理的问题

Question

如题：移动端（PC端页一样）的图片展示时候，往往会出现图片变形，拉伸的问题。大家处理图片不变行的方式有哪些？分享一下呗
我现在遇到的问题就是：图片宽高不定（用户上传的），这意味着图片的宽高比就不定，可是页面是图片的盒子span确是固定的宽高，这就容易出现一些匪夷所思的效果了----某些屌丝的图片宽高比大得惊人，一放上页面立马变形了，这怎么办？现在我的解决方式为：直接把图片设置为盒子的背景，然后设置cover/ 50% 50% no-repeat；方形图片可以正常显示，长条形和宽图，则会裁剪掉一部分（但是不会变形，且居中显示），老板说可以了，那就可以了吧。

Answer 1

等比计算你的图片尺寸，让其保持在你要限制的尺寸范围内，谁用谁知道&nbsp; &nbsp; // width height 图片的原始尺寸&nbsp; &nbsp; // maxWidth maxHeight 最大的宽和高 你自己决定&nbsp; &nbsp; compressSize: function(width, height, maxWidth, maxHeight){&nbsp; &nbsp; &nbsp; &nbsp; var scale = Math.min(maxWidth / width, maxHeight / height, 1);&nbsp; &nbsp; &nbsp; &nbsp; var normal = scale < 1 ? 1.1 : 1;&nbsp; &nbsp; &nbsp; &nbsp; return{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: parseInt(width * scale / normal),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: parseInt(height * scale / normal)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },