html css3不拉伸图片显示效果

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

1. <div id="surface-div1">
2. <img :src="pic1" class="surface-img">
3. </div>

复制代码

CSS:

1. #surface-div1{
2.     position: relative;
3.     width: 372px;
4.     height: 175px;
5.     float: left;
6.     margin-top: -34px;
7.     margin-left: 122px;
8.     cursor: pointer;
9.     background: url(../../../static/img/addheadpic.jpg)center center no-repeat;
10.     text-align: center;
11.     border: 1px solid #CCCCCC;
12.     border-radius:6px;
13.     overflow: hidden;
14. }
15. #surface-div1 img{
16.     position: absolute;
17.     width: 100%;
18.     top: 50%;
19.     left: 0;
20.     transform: translateY(-50%) scale(1);
21.     border:none;
22.     border-radius: 6px;display:table-cell
23. }

复制代码

最终效果如上图的左边。

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

html:

1. <div id="surface-div">
2.   <div class="sur-div">
3.      <img :src="pic" class="surface-img">
4.   </div>
5. </div>

复制代码

css:

1. #surface-div{
2.     position: relative;
3.     width: 372px;
4.     height: 372px;
5.     float: left;
6.     margin-top: -34px;
7.     margin-left: 122px;
8.     cursor: pointer;
9.     background: url(../../../static/img/addheadpic.jpg)center center no-repeat;
10.     text-align: center;
11.     border: 1px solid #CCCCCC;
12.     border-radius:6px;
13.     overflow: hidden;
14. }
15. .sur-div{
16.     display: table-cell;
17.     text-align: center;
18.     vertical-align: middle;
19.     font-size: 12px;
20.     width: 372px;
21.     height: 372px;
22.     overflow: hidden;
23. }
24. #surface-div img{   
25.     max-height: 100%;
26.     max-width: 100%;
27.     vertical-align: middle;
28.     border: 0;
29. }

复制代码

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

到此这篇关于html css3不拉伸图片显示效果的文章就介绍到这了,更多相关html css3不拉伸图片 内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！