html css3不拉伸圖片顯示效果
發(fā)布時間:2021-06-07 17:09:34 作者:開心大表哥
我要評論

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