html css3不拉伸圖片顯示效果
發(fā)布時(shí)間：2021-06-07 17:09:34 作者：開(kāi)心大表哥 
我要評(píng)論
我要評(píng)論本文主要介紹了html css3不拉伸圖片顯示效果，類(lèi)似淘寶，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
1.利用transform屬性不拉伸顯示圖片,(路徑問(wèn)題需要按需求修改）；
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>
</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;
}
效果如上圖中的左邊部分，重點(diǎn)是需要外面的div是正方形。
淘寶的是這樣的：
到此這篇關(guān)于html css3不拉伸圖片顯示效果的文章就介紹到這了,更多相關(guān)html css3不拉伸圖片 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
Html+Css+Jquery實(shí)現(xiàn)左側(cè)滑動(dòng)拉伸導(dǎo)航菜單欄的示例代碼
這篇文章主要介紹了Html+Css+Jquery實(shí)現(xiàn)左側(cè)滑動(dòng)拉伸導(dǎo)航菜單欄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們2020-03-17CSS實(shí)現(xiàn)HTML背景圖片拉伸鋪滿示例
HTML背景圖片拉伸鋪滿，使用CSS實(shí)現(xiàn)圖片的width和height均100%，具體如下，感興趣的朋友可以參考下2013-09-09
