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 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
详解Js模块化的作用原理和方案
Apr 29 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
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JQuery伸缩导航练习示例
2013/11/13 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
治超工作实施方案
2014/05/04 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
pt-archiver 主键自增
2022/04/26 MySQL