如何用CSS/JavaScript/jQuery实现固定高度div内图片动态垂直居中裁剪

这是个很典型的图片自适应居中裁剪需求，我有个简单且可靠的CSS方案，能完美解决你遇到的问题——不管图片高度是刚好240px还是达到375px，都能按要求正确显示：

实现思路 #

利用Flex布局的垂直居中特性，结合容器的overflow: hidden来裁剪超出部分。核心逻辑是：

• 固定容器的宽高（300px×240px，匹配你的图片宽度和容器高度要求）
• 让容器成为Flex容器，通过align-items: center实现图片垂直居中
• 开启容器的溢出隐藏，自动裁剪图片超出容器高度的部分
• 图片宽度设为100%，保证其填满容器宽度，高度自动按比例缩放

代码示例 #

HTML结构 #

<div class="image-wrapper">
  <img src="your-image-source.jpg" alt="描述图片内容">
</div>

CSS样式 #

.image-wrapper {
  /* 固定容器尺寸 */
  width: 300px;
  height: 240px;
  /* 开启溢出隐藏，裁剪超出部分 */
  overflow: hidden;
  /* 使用Flex布局实现垂直居中 */
  display: flex;
  align-items: center;
  /* 可选：如果图片宽度可能不等于300px，添加下面一行实现水平居中 */
  /* justify-content: center; */
}

.image-wrapper img {
  /* 图片宽度填满容器，高度自动按比例适配 */
  width: 100%;
  height: auto;
}

方案优势 #

• 兼容性好：Flex布局在现代浏览器中支持度很高，也兼容IE11+
• 自适应强：不管图片高度是240px（刚好适配容器）还是375px（超出容器），都能自动处理：
  • 当图片高度=240px时，完全显示在容器内，无裁剪
  • 当图片高度>240px时，垂直居中后自动裁剪上下多余部分（比如375px高的图片会裁剪上下各76.5px，完全符合你的要求）
• 无异常情况：不会出现大图片正常裁剪但小图片显示异常的问题，因为Flex的居中是基于元素本身的尺寸计算的，不会强制拉伸或压缩图片

备选方案（非Flex实现） #

如果你需要兼容更老的浏览器，也可以用绝对定位+变换的方式实现：

.image-wrapper {
  width: 300px;
  height: 240px;
  overflow: hidden;
  position: relative;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这个方案的效果和Flex版本完全一致，原理是通过top:50%和transform: translateY(-50%)让图片垂直居中，超出部分被容器的overflow:hidden裁剪。

内容的提问来源于stack exchange，提问作者Chris