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

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

html:

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

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#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
}

html css3不拉伸图片显示效果插图
html css3不拉伸图片显示效果插图1

最终效果如上图的左边。

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

html:

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

css:

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

html css3不拉伸图片显示效果插图2

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

html css3不拉伸图片显示效果插图3

发表评论

您的电子邮箱地址不会被公开。