JS+CSS设置img在DIV中只显示Img垂直居中的部分
2018-10-12 13:53
615 查看
一个Div中显示Img，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垂直居中的部分
- JS+CSS设置img在DIV中只显示居中部分
- css设置div垂直居中显示
- div+css中如何让图片垂直居中显示
- div+css：页面整体布局居中显示：上下居中||垂直居中，左右居中||水平居中
- css中设置div为透明，及内容垂直居中
- 让div绝对居中显示的css&js
- CSS垂直居中显示设置
- css效果，在一个盒子里，把一部分内容隐藏掉，在鼠标悬停到div时，就会把隐藏的部分向上显示出来。 不用js操作，纯css就可以。
- CSS中如何把Span标签等行内元素设置为固定宽度及div中内容垂直居中
- css控制一个div在其父级的div垂直居中显示
- div+css设置列表li超出部分显示省略号
- 如何设置图片、文字在容器（div）中垂直居中的显示？
- css控制一个div在其父级的div垂直居中显示
- css+div设置内容水平和垂直居中
- 设置 img 在 div 中水平居中和垂直居中
- Css控制div水平垂直居中显示
- Web_CSS_DIV内部垂直居中显示
- css div img 垂直居中对齐！
- 兼容IE6,IE7,IE8,Firefox,Chrome，DIV+CSS垂直居中终于失败，最后三分钟用写了几行JS解决，经简单测试，还行。