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 相关文章推荐
jquery 实现的全选和反选
Apr 15 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
js实现select跳转功能代码
Oct 22 Javascript
javascript如何定义对象数组
Jun 07 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
详解JavaScript树结构
Jan 09 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
vue实现购物车案例
2020/05/30 Javascript
Numpy中的mask的使用
2018/07/21 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Pytorch之contiguous的用法
2019/12/31 Python
python十进制转二进制的详解
2020/02/07 Python
Python数据正态性检验实现过程
2020/04/18 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
数学检讨书1000字
2014/02/24 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
企业安全生产标语
2014/06/06 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
请客吃饭开场白
2015/06/01 职场文书
小学生节约用水倡议书
2019/08/12 职场文书