关于前端图片处理的问题

Question

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

Answer 1

等比计算你的图片尺寸，让其保持在你要限制的尺寸范围内，谁用谁知道

    // width height 图片的原始尺寸

    // maxWidth maxHeight 最大的宽和高 你自己决定

    compressSize: function(width, height, maxWidth, maxHeight){

        var scale = Math.min(maxWidth / width, maxHeight / height, 1);

        var normal = scale < 1 ? 1.1 : 1;

        return{

            width: parseInt(width * scale / normal),

            height: parseInt(height * scale / normal)

        }

    },