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)文章
如果想做一個鏈接點擊后不做任何事情，或者響應(yīng)點擊而完成其他事情一般都是設(shè)置屬性href = "#"其實還有比這更好的方法，下面為大家整理了幾種比較常見的解決方法，感興趣的朋友可以參考下2013-08-08
這篇文章主要為大家詳細(xì)介紹了Javascript實現(xiàn)登錄框拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了HTML界面登錄時的JS驗證方法,需要的朋友可以參考下2014-05-05
JavaScript的類型轉(zhuǎn)換(字符轉(zhuǎn)數(shù)字 數(shù)字轉(zhuǎn)字符)
不能把JavaScript中的類型轉(zhuǎn)換看作為強(qiáng)制類型轉(zhuǎn)換。2010-08-08
本文主要介紹了關(guān)于小程序網(wǎng)絡(luò)請求的封裝的相關(guān)資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
我的javascript 函數(shù)鏈之演變,需要的朋友可以參考下。2011-04-04
這篇文章主要向大家介紹了原生JS實現(xiàn)的LOADING效果的代碼，效果非常不錯，而且可以自定義顏色和速度，推薦給大家，希望大家能夠喜歡。2015-03-03
clipboard.js是一款輕量級的實現(xiàn)復(fù)制文本到剪貼板功能的JavaScript插件，本文就詳細(xì)的介紹一下如何使用，感興趣的可以了解一下2021-11-11
JavaScript實現(xiàn)的原生態(tài)兼容IE6可調(diào)可控滾動文字功能詳解
這篇文章主要介紹了JavaScript實現(xiàn)的原生態(tài)兼容IE6可調(diào)可控滾動文字功能,簡單說明了文字滾動的實現(xiàn)原理并結(jié)合具體實例形式給出了javascript文字滾動功能的具體實現(xiàn)代碼,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了js+ajax實現(xiàn)獲取文件大小的方法,涉及JavaScript調(diào)用ajax交互及后臺C#文件操作的相關(guān)技巧,需要的朋友可以參考下2015-12-12