html css3不拉伸图片显示效果 类似淘宝的
1.利用transform属性不拉伸显示图片,(路径问题需要按需求修改）；
html:
<div id="surface-div1"><img :src="pic1" class="surface-img"></div>- 1
- 2
- 3
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}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
最终效果如上图的左边。
2.参考淘宝的，利用display:table-cell和文字大小控制居中
html:
<div id="surface-div"> <div class="sur-div"> <img :src="pic" class="surface-img"> </div></div>- 1
- 2
- 3
- 4
- 5
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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
效果如上图中的左边部分，重点是需要外面的div是正方形。
淘宝的是这样的：
1.利用transform属性不拉伸显示图片,(路径问题需要按需求修改）；
html:
<div id="surface-div1"><img :src="pic1" class="surface-img"></div>- 1
- 2
- 3
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}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
最终效果如上图的左边。
2.参考淘宝的，利用display:table-cell和文字大小控制居中
html:
<div id="surface-div"> <div class="sur-div"> <img :src="pic" class="surface-img"> </div></div>- 1
- 2
- 3
- 4
- 5
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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
效果如上图中的左边部分，重点是需要外面的div是正方形。
淘宝的是这样的：