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>

点击下载源文件
Javascript 相关文章推荐
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
js实现不重复导入的方法
Mar 02 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
服务器web工具 php环境下
2010/12/29 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
javascript 写类方式之四
2009/07/05 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
js给selected添加options的方法
2015/05/06 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python如何在终端里面显示一张图片
2016/08/17 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
python爬取代理ip的示例
2020/12/18 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
英语感恩演讲稿
2014/01/14 职场文书
应用数学专业求职信
2014/03/14 职场文书
防汛通知
2015/04/25 职场文书