admin 管理员组

文章数量: 1184232

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

本文标签： 实战秘籍 风格图片 打造淘宝

版权声明：本文标题：HTML CSS3实战秘籍：打造淘宝风格图片展示，实现完美的比例与不拉伸效果 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1771506437a3545383.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。