JS+CSS设置img在DIV中只显示居中部分

最新推荐文章于 2025-08-22 11:32:18 发布

转载最新推荐文章于 2025-08-22 11:32:18 发布 · 2.3k 阅读

文章标签：

#css #js #部分显示img

本文介绍了一种在固定宽度的Div中使图片水平及垂直居中的方法，并提供了具体的HTML代码实现。通过调整图片的margin属性，使得不论图片高度如何变化，都能保持在Div中的垂直居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个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>

点击下载源文件