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获取select标签选中值的两种方式
Jan 09 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
js实现按座位号抽奖
Apr 05 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
清除输入框内的空格
2016/12/21 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Django的性能优化实现解析
2019/07/30 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
解决Python二维数组赋值问题
2019/11/28 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
Python grpc超时机制代码示例
2020/09/14 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
一些.net面试题
2014/10/06 面试题
企业理念标语
2014/06/09 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
作风年建设汇报材料
2014/08/14 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
涨价通知
2015/04/23 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL