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;
 }