JS+CSS設(shè)置img在DIV中只顯示Img垂直居中的部分
更新時間：2013年10月24日 15:45:52 作者：
img的寬和Div相同，但高不固定，要求只顯示Img垂直居中的部分，下面有個不錯的示例，感興趣的朋友可以參考下
一個Div中顯示Img，img的寬和Div相同，但高不固定，要求只顯示Img垂直居中的部分。
示例：
原圖：
代碼實現(xiàn)：
<div style="width: 190px; height: 100px; overflow: hidden;">
<img src="http://beijing.timeoutcn.com/UserFiles/Images/2013-10-21/20131021104840077cover-22-1.jpg" width="190px" style="vertical-align: middle;"
onload="this.style.marginTop = (parseInt(this.parentNode.style.height) - this.height)/2 + 'px';this.style.marginLeft = (parseInt(this.parentNode.style.width) - this.width) /2 + 'px'" />
</div>
點擊下載源文件
示例：
原圖：
代碼實現(xiàn)：
復(fù)制代碼 代碼如下:
<div style="width: 190px; height: 100px; overflow: hidden;">
<img src="http://beijing.timeoutcn.com/UserFiles/Images/2013-10-21/20131021104840077cover-22-1.jpg" width="190px" style="vertical-align: middle;"
onload="this.style.marginTop = (parseInt(this.parentNode.style.height) - this.height)/2 + 'px';this.style.marginLeft = (parseInt(this.parentNode.style.width) - this.width) /2 + 'px'" />
</div>
點擊下載源文件
相關(guān)文章
javascript實現(xiàn)帶節(jié)日和農(nóng)歷的日歷特效
這篇文章主要介紹了javascript實現(xiàn)帶節(jié)日和農(nóng)歷的日歷特效,效果十分棒，需要的朋友可以參考下2015-02-02
150行代碼帶你實現(xiàn)微信小程序中的數(shù)據(jù)偵聽
在這篇文章中, 我將用150行代碼, 手把手帶你打造一個小程序也可以使用的偵聽器，感興趣的朋友跟隨小編一起看看吧2019-05-05
JS+CSS實現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼
這篇文章主要介紹了JS+CSS實現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼,涉及JavaScript結(jié)合css動態(tài)操作頁面元素屬性的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-09-09
本篇文章是小編整理的關(guān)于javascript獲取圖片的top N主色值方法的詳解以及代碼分享，有興趣的朋友參考下吧。2018-01-01
這段很短的代碼，可以將word轉(zhuǎn)出html格式的代碼，當(dāng)然word自己也帶的，另存為里面就有的，喜歡的朋友可以試試。2010-04-04
js判斷手機(jī)是否安裝并打開app，未安裝則安裝app【兼容Android、ios,親測可用】
這篇文章主要介紹了js判斷手機(jī)是否安裝并打開app,未安裝則安裝app,通過調(diào)用瀏覽器判斷app,兼容Android、ios等系統(tǒng),,需要的朋友可以參考下2023-05-05
微信小程序的云開發(fā)功能剛剛上線，這篇文章主要介紹了小程序云開發(fā)部署攻略(圖文教程)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了微信小程序從注冊賬號到上架詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JavaScript如何封裝單向鏈表，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09![BootStrap學(xué)習(xí)系列之布局組件(下拉,按鈕組[toolbar],上拉)](http://img.jbzj.com/images/xgimg/bcimg9.png)
BootStrap學(xué)習(xí)系列之布局組件(下拉,按鈕組[toolbar],上拉)
這篇文章主要介紹了BootStrap學(xué)習(xí)系列之布局組件(下拉,按鈕組[toolbar],上拉)的相關(guān)資料,需要的朋友可以參考下2017-01-01