div中的img标签多余空白bug解决方案

上传图片之前：

上图之前之后：

原图是这样的：

发现区别了吧，这里用到了css3的object-fit属性为cover（保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。）
之前不知道这个属性的时候还傻傻写js判断＝＝

 img.onload = function(){
            div.appendChild(img);
            var height = $(".preview img")[0].clientHeight;
            var width = $(".preview img")[0].clientWidth;
            var num;
            if(height>width){
                $(".preview>img").css({width:"100%"});
                height = $(".preview img")[0].clientHeight;
                num = (height-100)/2;
                $(".preview>img").css({margin:0});
                $(".preview>img").css({marginTop:-num+"px"});
            }else if(height<width){
                $(".preview>img").css({height:"100%"});
                width = $(".preview img")[0].clientWidth;
                num = (width-100)/2;
                $(".preview>img").css({margin:0});
                $(".preview>img").css({marginLeft:-num+"px"});
            }
        };

注：－100的原因是因为我的灰色框为100px＊100px
呃，其实我想说的重点是div中的img标签多余空白bug解决方案。
在做项目的时候，遇到这样的问题：

呵嘿，上面有个白条对吧
有3种解决方案，感觉下面这3种最实用啦：
1、给图片设置

img{
display:block;
}

2、给图片设置：

img{
float:left;
}

3、给图片设置：

 img {
 vertical-align:top;
 }