以下
container均为图片img容器div的class选择器
一、固定某一边（width/height）另一边自适应，超出容器（container）隐藏，居中显示
.container{
width: 200px;
height: 200px;
overflow: hidden;
border: 2px solid red;
position: relative;
}
.container img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
如果图片的宽度限制了，高度大于等于容器的高度，就会填满整个容器，但是如果图片高度小于容器高度，就会出现空白，固定高度同理。此方法是最简单也最实用，配合后台裁切，更加完美。
二、图片不裁切 完整显示出来 在容器内居中显示
.container{
width: 200px;
height: 200px;
border: 2px solid red;
position: relative;
}
.container img{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
缺点：容器会有留白
三、将图片变成背景，通过改变背景尺寸等可以任意改变图片在容器中显示的效果，操作是最方便的
.container{
width: 200px;
height: 200px;
border: 2px solid red;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
通过上图更改background-size，我们可以看到方法一和方法二都能轻松实现。而且，最后一种cover效果是最理想的，即居中显示，占满整个容器并且不变形。这种方法如果不考虑seo的话，用起来还是很顺手的。但是，如果您是资讯站、图片展等等，千万不要用这种方法，否则你的图片将很难被搜索引擎收录。
四、object-fit（ie不兼容）
.container{
width: 200px;
height: 200px;
border: 2px solid red;
}
.container img{
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit和object-position。你可以这么理解，object-position相当于background-position，它的默认值是50% 50%，也就是居中，所以一般不写，加了object-fit，默认就居中了。而object-fit，相当于background-size，即图片填充方式（这里不是图片大小）。
注意：图片一定要设置宽高，否则设置object-fit无效。将图片设置为何容器一样的宽高就可以了。容器也不需要设置溢出隐藏，object-fit会自动隐藏超出图片的宽高部分。
最后附上 原文：在头条IT学堂看到CSS完美解决前端图片变形问题的文章
原文地址：https://www.cnblogs.com/lwming/p/10982711.html
！！！原文有图片效果展示
辛勤的搜索中还有个方法，但我没试过：图片自适应显示（垂直居中）兼容老版IEcss写法
