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>
点击下载源文件
示例：
原图：
代码实现：
复制代码 代码如下:
<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>
点击下载源文件
相关文章
如果想做一个链接点击后不做任何事情，或者响应点击而完成其他事情一般都是设置属性href = "#"其实还有比这更好的方法，下面为大家整理了几种比较常见的解决方法，感兴趣的朋友可以参考下2013-08-08
这篇文章主要为大家详细介绍了Javascript实现登录框拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了HTML界面登录时的JS验证方法,需要的朋友可以参考下2014-05-05
不能把JavaScript中的类型转换看作为强制类型转换。2010-08-08
本文主要介绍了关于小程序网络请求的封装的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
我的javascript 函数链之演变,需要的朋友可以参考下。2011-04-04
这篇文章主要向大家介绍了原生JS实现的LOADING效果的代码，效果非常不错，而且可以自定义颜色和速度，推荐给大家，希望大家能够喜欢。2015-03-03
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件，本文就详细的介绍一下如何使用，感兴趣的可以了解一下2021-11-11
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
这篇文章主要介绍了JavaScript实现的原生态兼容IE6可调可控滚动文字功能,简单说明了文字滚动的实现原理并结合具体实例形式给出了javascript文字滚动功能的具体实现代码,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了js+ajax实现获取文件大小的方法,涉及JavaScript调用ajax交互及后台C#文件操作的相关技巧,需要的朋友可以参考下2015-12-12
最新评论