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 相关文章推荐
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
angular分页指令操作
Jan 09 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
vue中添加与删除关键字搜索功能
Oct 12 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 getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
matplotlib中legend位置调整解析
2017/12/19 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
高三学生评语大全
2014/04/25 职场文书
优秀求职信
2014/05/29 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏