一個(gè)網(wǎng)頁中往往會(huì)有很多圖片，而網(wǎng)站的編輯上傳圖片時(shí)可能并不一定按照為父框設(shè)定的那個(gè)寬高來傳，這樣圖片往往會(huì)將父框撐開或者被父框截?cái)唷Ｒ环N比較好的解決的辦法是這樣的：

?

HTML代碼結(jié)構(gòu)：

<div class="dimg"><i class="posI"></i><img width="125" height="160" alt="寶格麗全新珠寶腕表" src="http://img0.pclady.com.cn/pclady/watch/news/1411/29.jpg"></div>

?

CSS：

/*父框樣式*/.dimg {width: 125px;height: 160px;text-align: center;}/*輔助元素樣式*/i.posI {display: inline-block;height: 100%;vertical-align: middle;width: 0;}/*圖片樣式*/.dimg img {vertical-align: middle;max-width: 125px;max-height: 160px;_width: expression(document.body.clientWidth > 125 ? "125px" : "auto");_height: expression(this.scrollHeight > 160 ? "160px" : "auto");}

?

這個(gè)辦法的缺點(diǎn)是需要增加一個(gè)無意義的輔助元素i，還要用到expression來為IE6模擬max-width和maxheight，只能視情況而用。

?

?

?

實(shí)現(xiàn)的效果如下：

?

當(dāng)網(wǎng)站編輯放的是與父框?qū)捀呦嗟鹊膱D片時(shí)：

?

?

?

當(dāng)網(wǎng)站編輯放的是縮小5倍的小圖時(shí)：

?

轉(zhuǎn)載于:https://www.cnblogs.com/macliu/p/4108190.html

總結(jié)

以上是生活随笔為你收集整理的一种用css实现图片在父框中等比缩放并垂直居中的办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。