首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

点击下载源文件

JS+CSS设置img在DIV中只显示Img垂直居中的部分

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
详解Vue 全局变量，局部变量
Apr 17 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
js实现录音上传功能
Nov 22 Javascript
详解JavaScript 异步编程
Jul 13 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
ACID(1) appdata(1) Windows server 2003(1) mysqldump(1) sock(2) sentinel(1) protocol(1) Outlook(1) 黑屏(2) minio(1)
You might like
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
移动端（微信等使用vConsole调试console的方法
2019/03/05 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
python encode和decode的妙用
2009/09/02 Python
python创建关联数组（字典）的方法
2015/05/04 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
Expedia法国：全球最大在线旅游公司
2018/09/30 全球购物
英国网上自行车商店：Tredz Bikes
2019/10/29 全球购物
巴西最大的巴士票务门户：Quero Passagem
2020/11/21 全球购物
党员公开承诺书内容
2014/05/20 职场文书
如何制定销售人员薪酬制度？
2019/07/09 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
基于Redission的分布式锁实战
2022/08/14 Redis