控制图片固定大小不失真的几种方法

1.固定宽度或高度
这是一种比较常见的方法都烂大街了，先直接上代码吧。

<style>
.box-content{
    width:96%;
    margin:2%;
    display: flex;
    flex-wrap: wrap;
}
.box{
    width:23%;
    margin:1%;
}
.box img{
    width:100%;
}
</style>
<div class="box-content">
    <div class="box">
      <img src="http://images.hanjiapz.com/upload/20171114/ee91f4ee560845e4bbb640dc8d1bd5ae.jpg">
    </div>
    <div class="box">
      <img src="http://images.hanjiapz.com/upload/20171114/ee91f4ee560845e4bbb640dc8d1bd5ae.jpg">
    </div>
</div>

如上所示，这样下来的图片宽度被固定了，跟.box盒子容器一样宽。高度会随着盒子的比例进行压缩或放大。
2.利用背景图图片居中显示不拉伸变形
还是直接上代码吧。

<style>
    .box-content{
        margin:20px;
        display: flex;
        flex-wrap: wrap;
    }
    .box-img{
            border: 1px solid #f7ecb5;
            background-position: center center;
            background-color: #1c2d3f;
            background-repeat: no-repeat;
            background-size: cover;
            overflow: hidden;
    }
    .box-item-1{
         width: 45%;
         margin: 2.5%;
         height: 200px;
    }
</style>
<div class="box-content">
    <div class="box-img box-item-1" style="backgound-img:url(http://images.hanjiapz.com/upload/20171114/ee91f4ee560845e4bbb640dc8d1bd5ae.jpg)"></div>
</div>

这个其实是利用了背景图居中的方法进行取巧，其实并不是img图片。但是这样确实解决了不少问题。

3.脚本控制图片计算

<style>
    .box-content{
        margin:20px;
        display: flex;
        flex-wrap: wrap;
    }
    .pos-r{
        position:relative;
    }
    .box{
        width:23%;
        margin:1%;
        height:200px;
    } 
</style>
<div class="box-content">
    <div class="box pos-r">
        <img class="handle-img" handle-src="http://images.hanjiapz.com/upload/20171114/ee91f4ee560845e4bbb640dc8d1bd5ae.jpg">
    </div>
</div>
<script>
    /**
     * 多个图片显示处理
     * @param lazyImgList
     */
    function handleImg(lazyImgList) {
        for(var i=0;i<lazyImgList.length;i++){
            loadImages(lazyImgList[i]);
        }
    }
    /**
     * 单个图片处理
     * @param img
     */
    function loadImages(img){
        var box = img.parentNode;
        img.onload = function(){
            var height=img.height;
            var width=img.width;
            var boxWidth=box.offsetWidth;
            var boxHeight=box.offsetHeight;
            img.style.position = "absolute";
            if (height >width) {
                var objHeight = (height / width) * boxWidth;
                if(objHeight-boxHeight>0){
                    img.style.width = boxWidth.toString() + "px";
                    img.style.height = objHeight.toString() + "px";
                    var top = -(objHeight - boxHeight) / 2;
                    img.style.top = top.toString() + "px";
                    img.style.left = "0px";
                }else {
                    img.style.height = boxHeight.toString() + "px";
                    var objWidth=(boxHeight/ height)*width;
                    img.style.width =objWidth + "px";
                    var left = -(objWidth - boxWidth) / 2;
                    img.style.left = left.toString() + "px";
                    img.style.top = "0px";
                }
            } else {
                var objWidth =(width / height) *boxHeight;
                if(objWidth-boxWidth>0){
                    img.style.height = boxHeight.toString() + "px";
                    img.style.width = objWidth.toString() + "px";
                    var left = -(objWidth - box.offsetWidth) / 2;
                    img.style.left = left.toString() + "px";
                    img.style.top = "0px";
                }else {
                    img.style.width = boxWidth.toString() + "px";
                    var objHeight=(boxWidth/ width)*height;
                    img.style.height = objHeight.toString() + "px";
                    var top = -(objHeight - boxHeight) / 2;
                    img.style.top = top.toString() + "px";
                    img.style.left = "0px";
                }
            }
            img.removeAttribute("handle-src");
            img.className=img.className.replace('handle-img','handed-img');
        };
        img.src=img.getAttribute("handle-src");
    }
     var list=document.getElementsByClassName("hand-img");
            handleImg(list);
</script>

经过脚本处理后图片也居中显示了。图片超出的部分进行了相应的隐藏。
4.css3新属性object-fit
这个是css3的新的属性类似于2的background-size属性。一般情况下与单独使用时，默认图片居中显示。也可以配合object-position使用。

<style>
    .content{
        margin:20px;
        display: flex;
        flex-wrap: wrap;
    }
    .picture-box{
        height:200px;
        width:23%;
        margin:1%;
    }
    .object-img{
        width:100%;
        heght:100%;
        object-fit:cover;
        object-position:center;
    }
</style>
<div class="content">
    <div class="picture-box">
        <img class="object-img" src="http://images.hanjiapz.com/upload/20171114/ee91f4ee560845e4bbb640dc8d1bd5ae.jpg">
    </div>
</div>