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实现的map方法示例代码
Jan 13 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
webgl实现物体描边效果的方法介绍
Nov 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
You might like
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
Js+XML 操作
2006/09/20 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
python自动翻译实现方法
2016/05/28 Python
python实现图片处理和特征提取详解
2017/11/13 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python删除过期log文件操作实例解析
2018/01/31 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python 私有化操作实例分析
2019/11/21 Python
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
中学生检讨书1000字
2014/10/28 职场文书
社区重阳节活动总结
2015/03/24 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android