关于前端图片处理的问题

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)
        }
    },

Answer 2

等比缩放或者使用七牛的图片处理

Answer 3

设置图片max-width和max-height为盒子大小，居中显示，再给盒子设置个背景色

Answer 4

<div> <img/></div>
div{width:100px;height:100px;overflow:hidden;}
div img{width:100%;};
或者限制用户上传的图片的尺寸的大小；
你可以看看，好多网站做的都是给个上传图片要求给定的尺寸。

Answer 5

<div>
     <img src="xxxx" />
 </div>

    div    {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }
    img {
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
    }

Answer 6

上面几位提出来的解决方案确实存在这样或者那样的问题，如果你想做的更好些，考虑到各种情况的话，建议你用js去获取用户上传的图片的宽高在去决定盒子的大小。