当图片被拉伸或变形时，你需要用到css中的object-fit

关键属性：

object-fit:fill;     (初始值） 被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。

object-fit:contain;  被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

object-fit:cover;  被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。

object-fit:none;  被替换的内容尺寸不会被改变。

object-fit:scale-down;  内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。

全局属性：（在这里我们只看关键属性，全局属性过一遍就好）

object-fit:inherit;  

object-fit:initial;  

object-fit:unset;

下面直接看看图片效果：

（图片来源：https://www.zhangxinxu.com/study/201503/css3-object-fit.html）