HTML CSS3新手指南：轻松打造淘宝级图片显示，不失真的艺术感

1.利用transform属性不拉伸显示图片,(路径问题需要按需求修改）；
html:

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

CSS:

#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-div1img{
    position: absolute;
    width:100%;
    top:50%;
    left:0;
    transform:translateY(-50%)scale(1);
    border:none;
    border-radius:6px;display:table-cell
}

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

css:

#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-divimg{   
    max-height:100%;
    max-width:100%;
    vertical-align: middle;
    border:0;
}