如何用Bootstrap 4在小div中居中大图并隐藏溢出？

嘿，这个需求其实很容易实现，结合Bootstrap的类和一点点自定义CSS就能搞定，刚好匹配你提到的col-md-6 px-0父容器场景。

核心思路 #

我们要让图片保持原尺寸，在父容器中垂直水平居中，同时裁剪掉超出父容器的部分。关键是利用绝对定位+平移实现精准居中，配合父容器的溢出隐藏属性完成裁剪。

实现代码 #

HTML结构

<div class="col-md-6 px-0 custom-img-wrapper">
  <img src="your-image-path.jpg" alt="图片描述文本">
</div>

自定义CSS

/* 父容器样式 */
.custom-img-wrapper {
  position: relative;
  /* 必须设置父容器高度，否则会被图片完全撑开，无法实现溢出裁剪 */
  /* 可根据需求调整，比如固定高度、响应式高度 */
  height: 400px; 
  overflow: hidden;
}

/* 图片样式 */
.custom-img-wrapper img {
  position: absolute;
  /* 让图片中心与父容器中心对齐 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 强制保持图片原始尺寸，避免被压缩拉伸 */
  width: auto;
  height: auto;
  /* 可选：如果图片比父容器小，强制覆盖整个容器（避免留白） */
  min-width: 100%;
  min-height: 100%;
}

关键细节解释 #

• position: relative：给父容器设置相对定位，让图片的绝对定位基于父容器，而非整个页面。
• overflow: hidden：这是裁剪超出部分的核心属性，任何超出父容器边界的图片区域都会被隐藏。
• 图片的绝对定位+transform: translate(-50%, -50%)：这是最可靠的垂直水平居中方案，不会改变图片原始尺寸，只是将图片中心对齐到父容器中心。
• 父容器高度：必须设置明确高度（固定值或响应式值，比如height: calc(100vh - 80px)），否则父容器会被图片完全撑开，无法产生“溢出隐藏”的效果。

可选：纯Bootstrap类简化方案（少写CSS） #

如果你不想写太多自定义CSS，可以利用Bootstrap的flex类快速实现，不过仍需设置父容器的高度和溢出属性：

<div class="col-md-6 px-0 d-flex align-items-center justify-content-center" style="height: 400px; overflow: hidden;">
  <img src="your-image-path.jpg" alt="图片描述文本" class="flex-shrink-0">
</div>

• d-flex align-items-center justify-content-center：让flex容器内的元素自动垂直水平居中。
• flex-shrink-0：禁止图片被flex容器压缩，强制保持原始尺寸。
• 内联样式的height和overflow: hidden：负责固定容器高度并完成溢出裁剪。

这个方案更简洁，适合快速实现单个容器的需求；而自定义CSS的方式在需要统一调整多个同类型容器时更高效。

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