html css3不拉伸图片显示效果-662P.COM

本文主要介绍了html css3不拉伸图片显示效果，类似淘宝，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

html:

<div id="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-div1 img{

position: absolute;

width: 100%;

top: 50%;

left: 0;

transform: translateY(-50%) scale(1);

border:none;

border-radius: 6px;display:table-cell

}

这里写图片描述

最终效果如上图的左边。

2.参考淘宝的，利用display:table-cell和文字大小控制居中

html:

<div id="surface-div">

<div class="sur-div">

<img :src="pic" class="surface-img">

</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-div img{

max-height: 100%;

max-width: 100%;

vertical-align: middle;

border: 0;

}

这里写图片描述

效果如上图中的左边部分，重点是需要外面的div是正方形。
淘宝的是这样的：

这里写图片描述

html css3

0评论