JS+CSS设置img在DIV中只显示Img垂直居中的部分

更新时间：2013年10月24日 15:45:52 作者：

img的宽和Div相同，但高不固定，要求只显示Img垂直居中的部分，下面有个不错的示例，感兴趣的朋友可以参考下

一个Div中显示Img，img的宽和Div相同，但高不固定，要求只显示Img垂直居中的部分。

示例：

原图：

代码实现：

 
<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> 

点击下载源文件

您可能感兴趣的文章:

javascript实现带节日和农历的日历特效
这篇文章主要介绍了javascript实现带节日和农历的日历特效,效果十分棒，需要的朋友可以参考下
2015-02-02
150行代码带你实现微信小程序中的数据侦听
在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器，感兴趣的朋友跟随小编一起看看吧
2019-05-05
JS+CSS实现电子商务网站导航模板效果代码
这篇文章主要介绍了JS+CSS实现电子商务网站导航模板效果代码,涉及JavaScript结合css动态操作页面元素属性的相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-09-09
javascript获取图片的top N主色值方法详解
本篇文章是小编整理的关于javascript获取图片的top N主色值方法的详解以及代码分享，有兴趣的朋友参考下吧。
2018-01-01
可以将word转成html的js代码
这段很短的代码，可以将word转出html格式的代码，当然word自己也带的，另存为里面就有的，喜欢的朋友可以试试。
2010-04-04
js判断手机是否安装并打开app，未安装则安装app【兼容Android、ios,亲测可用】
这篇文章主要介绍了js判断手机是否安装并打开app,未安装则安装app,通过调用浏览器判断app,兼容Android、ios等系统,,需要的朋友可以参考下
2023-05-05
小程序云开发部署攻略(图文教程)
微信小程序的云开发功能刚刚上线，这篇文章主要介绍了小程序云开发部署攻略(图文教程)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
微信小程序从注册账号到上架（图文详解）
这篇文章主要介绍了微信小程序从注册账号到上架详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
JavaScript封装单向链表的示例代码
这篇文章主要介绍了JavaScript如何封装单向链表，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2020-09-09
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
这篇文章主要介绍了BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)的相关资料,需要的朋友可以参考下
2017-01-01