html css3不拉伸图片显示效果,类似淘宝的

￡神魔★判官ぃ 2022-06-08 02:50 122阅读 0赞

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

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 }

![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
最终效果如上图的左边。  
2.参考淘宝的，利用display:table-cell和文字大小控制居中  
html:

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

![这里写图片描述][SouthEast 2]  
效果如上图中的左边部分，重点是需要外面的div是正方形。  
淘宝的是这样的：  
![这里写图片描述][SouthEast 3]

[SouthEast]: /images/20220608/f476fc7320b94262a42d1ffc5d97e114.png
[SouthEast 1]: /images/20220608/43b574ad502b4790a927f7c098e1dedf.png
[SouthEast 2]: /images/20220608/80b88ba93693463bae85cfaa0c1f1b13.png
[SouthEast 3]: /images/20220608/6d9f53ebbd3a4910a7e8e4ee70a6d7e6.png