编程 Javascript

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

Posted in Javascript onOctober 24, 2013

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

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

原图：
JS+CSS设置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>

点击下载源文件

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS延迟加载(setTimeout) JS最后加载

Jul 15 Javascript

jQuery不使用插件及swf实现无刷新文件上传

Dec 08 Javascript

node.js中的path.delimiter方法使用说明

Dec 09 Javascript

picLazyLoad 实现图片延时加载(包含背景图片)

Jul 21 Javascript

基于bootstrap的选择框插件icheck

Dec 23 Javascript

JS三目运算(三元运算)方法详解

Mar 01 Javascript

Angular 2父子组件数据传递之@Input和@Output详解(下)

Jul 05 Javascript

vue+VeeValidate 校验范围实例详解（部分校验,全部校验）

Oct 19 Javascript

js的继承方法小结（prototype、call、apply）（推荐）

Apr 17 Javascript

详解小程序如何改变onLoad的执行时机

Nov 01 Javascript

详解JavaScript中精度失准问题及解决方法

Feb 04 Javascript

开发Node CLI构建微信小程序脚手架的示例

Mar 27 Javascript

JS 获取滚动条高度示例代码

Oct 24 #Javascript

通过javascript把图片转化为字符画

Oct 24 #Javascript

js编写trim()函数及正则表达式的运用

Oct 24 #Javascript

原生JS实现加入收藏夹的代码

Oct 24 #Javascript

js实现浏览器的各种菜单命令比如打印、查看源文件等等

Oct 24 #Javascript

js中如何复制一个对象并获取其所有属性和属性对应的值

Oct 24 #Javascript

js switch case default 的用法示例介绍

Oct 23 #Javascript