1.让图片始终显示在容器内,并且居中显示,这种方法不会裁切图片
.conter {width: 500px;height: 500px;border: 2px solid red;position: relative;margin-top: 30px;}.img {max-width: 100%;max-height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
2.通过object-fit css属性 而object-fit,相当于background-size,即图片填充方式
.conter {width: 500px;height: 500px;border: 2px solid red;position: relative;margin-top: 30px;}.img {width: 100%;height: 100%;object-fit: contain;}