#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浏览器
图片截取中间部分显示，超出边框部分隐藏，最后效果：有部分图片被截取，可能导致图片显示不全问题
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;
}
————————————————
版权声明：本文为CSDN博主「ymumi」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：/ymumi/article/details/80619195
