用object-fit和object-position来处理图片
半深入理解CSS3 object-position/object-fit属性
用百分比设置图片宽高
方式一：width：100% height：100%
div { width: 400px; height: 400px; border: 1px solid #000; } img { width: 100%; height: 100%; }
不管容器有多大，只要将img的宽高设置成100%（这里的100%是相对于父级宽高而言）就能自适应容器大小。那是不是就这这么简单完事儿了呢？如果你不介意图片被放大后可能出现失真的话也的确是这样就ok了。 假如你介意 图片放大
后会失真，我们可以改进上面的代码，只需要将img的样式简单修改
方式二：max-width：100% max-height：100%
img { max-width: 100%; max-height: 100%; }
max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽，在这里就是100px。而width的100%我们上面已经说过了是相对于父级宽度的，所以为了不让图片被放大后失
真我们可以设置img的最大宽度为自身尺寸大小，更通俗的讲就是只允许缩小不允许放大img。具体情况中是选择width:100%还是max-width:100%还是依据个人的需求而定