图片外层 用一个div包裹着

以长边为标准，短边自适应：

  div {
        display: flex;
         justify-content: center;
          align-items: center;
          width: 定值;
          height: 定值;
          }
   img {
        width:auto;
        height:auto;
        max-width:100%;
        max-height:100%;
        }
以短边为标准，长边中间截断：

object-fit： cover
1
object-fit 控制内容在框中的填充方式
由以下的一个单独关键字来指定

none： 保持原有尺寸,不会进行缩放
contain： 按比例缩放图片，刚好在容器盒子里完全展示｜
cover： 宽高按比例缩放，超出容器的部分居中裁剪
fill： 平铺满容器，宽高会被拉伸
scale-down： 取none和contain中生成的对象尺寸小的那个