起因
假设后端返回的图片是不同尺寸的，那么我希望页面上显示的统一尺寸但不变形的图片，可以使用img标签+css的object-fit属性来实现。
img标签 object-fit属性
- object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度，一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
- 可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。
- 更多属性值可参考菜鸟教程
- 例子：
同样效果：background-size属性
- 可参考笔记百度前端技术学院 第四天学习笔记（1）（CSS背景），效果可参考菜鸟教程
属性值cover与contain
相同之处
- 他们都会对图片进行等比缩放
区别
- cover属性值：
- 缩放背景图片以完全 覆盖 背景区，可能背景图片部分看不见。
- 该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被 裁剪。
- contain属性值：
- 保证图片始终 完整 的显示在背景区域，不裁剪图片
- 缩放背景图片以完全 装入 背景区，可能背景区部分空白。
- 该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。