编程 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 相关文章推荐

使用JavaScript获取电池状态的方法

May 03 Javascript

JQuery插入DOM节点的方法

Jun 11 Javascript

基于jquery css3实现点击动画弹出表单源码特效

Aug 31 Javascript

JavaScript如何禁止Backspace键

Dec 02 Javascript

自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

Dec 12 Javascript

node.js 中国天气预报简单实现

Jun 06 Javascript

详解vue-cli快速构建项目以及引入bootstrap、jq

May 26 Javascript

浅谈ES6新增的数组方法和对象

Aug 08 Javascript

VUE项目初建和常见问题总结

Sep 12 Javascript

Paypal支付不完全指北

Jun 04 Javascript

vuex的数据渲染与修改浅析

Nov 26 Vue.js

vue引入Excel表格插件的方法

Apr 28 Vue.js

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