HTML CSS3 does not stretch the image display effect

<div id="surface-div1">
<img :src="pic1" class="surface-img">
</div>

#surface-div1{
    position: relative;
    width: 372px;
    height: 175px;
    float: left;
    margin-top: -34px;
    margin-left: 122px;
    cursor: pointer;
    background: url(../../../static/img/addheadpic.jpg)center center no-repeat;
    text-align: center;
    border: 1px solid #CCCCCC;
    border-radius:6px;
    overflow: hidden;
}
#surface-div1 img{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%) scale(1);
    border:none;
    border-radius: 6px;display:table-cell
} 

<div id="surface-div">
  <div class="sur-div">
     <img :src="pic" class="surface-img">
  </div>
</div>

#surface-div{
    position: relative;
    width: 372px;
    height: 372px;
    float: left; 
    margin-top: -34px;
    margin-left: 122px;
    cursor: pointer;
    background: url(../../../static/img/addheadpic.jpg)center center no-repeat;
    text-align: center;
    border: 1px solid #CCCCCC;
    border-radius:6px;
    overflow: hidden;
}
.sur-div{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    width: 372px;
    height: 372px;
    overflow: hidden;
}
#surface-div img{   
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}