以百分比方式自适应宽度的保持比例的div显示图片利用的是以下W3C规范：

    规定padding/margin使用%单位是基于父元素的宽度的百分比的内外边距。
    

    通过设定height为0和padding-botton=width*n来撑大一个矩形的空白区域。而图片的显示则是使用背景图片的方式来控制。
                          
    以下为宽高比例为6:8的自适应宽度图片显示的例子：

    .square-div{
        width: 60%;                     /*有效的图片显示区域60%x80%*/
        margin: 10% 20% 10% 20%;        /*边框留白*/
        padding-bottom: 80%;            /*有效的图片显示区域60%x80%*/
        height: 0;
        background-size: 100% 100%;     /*图片撑满整个div的内部区域*/
        background-repeat: no-repeat;
    }
    #user1{
        background-image: url(./user1.jpg);/*指定图片部分*/
    }

    .pics-div{
      width: 100%;
      display:flex;
      flex-direction:row;
      justify-content:center;
      align-items:center;
    }
    .user-portrait{
      width: 20%;
    }
     
    <div class="pics-div">
      <div class="user-portrait">
        <div class="square-div portrait-pic" id="user1"></div>
      </div>
    </div>

    ————www.v-signon.com学习者共勉