图片填满外层div 自适应不拉伸变形

#max-width:100%   相对于img本身的尺寸而言，最大的宽度为自身宽度

#width:100% 相对于父级宽度的

1.等比例缩小垂直居中：按宽度等比列缩放   或者可以选择按高度等比缩放

.photo-box{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    width: 88px;
    height: 120px;
  }
  .photo-box img{
    min-width: 88px;
    height: auto;
  }

2.图片自适应问题（填满容器不拉伸）  object-fit:    不兼容    IE浏览器

参考资料，写得很详细  http://www.ylefu.com/post/350.html

图片截取中间部分显示，超出边框部分隐藏，最后效果：有部分图片被截取，可能导致图片显示不全问题

3.利用背景图片效果（填满容器不拉伸，效果与2类似）

Vue：

<div class="photo-bg" id="head-portrait" :style="{backgroundImage: 'url(' + vo.headPortrait + ')' }" ></div>

.photo-bg{
    width:100%;
    height:100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }