如何偏移Bootstrap Carousel中的图片以显示其中间区域

嘿，这个问题我之前帮同事处理过，完全不用提前裁剪图片，用几行CSS就能轻松搞定！

当你给轮播图片设置max-height: 400px后，Bootstrap默认会让图片顶部对齐容器，超出部分直接被截断，所以只能看到顶部。要让图片居中显示中间区域，有两种靠谱的方案：

方案一：用object-fit和object-position（推荐） #

这是现代浏览器支持的简洁方案，能精准控制图片的显示位置和填充方式：

/* 针对轮播中的图片设置样式 */
.carousel-item img {
  max-height: 400px;
  /* 让图片按比例缩放，填满容器同时裁剪超出部分 */
  object-fit: cover;
  /* 将图片的中心与容器中心对齐，展示中间区域 */
  object-position: center center;
}

• object-fit: cover：保证图片比例不变，同时填满整个容器，多余的部分会被裁剪掉
• object-position: center center：指定图片的对齐点，这里设置为垂直和水平都居中，就能让图片中间区域显示在轮播里

方案二：绝对定位+transform（兼容旧浏览器） #

如果需要兼容一些比较老的浏览器，这个方案也能达到同样效果：

.carousel-item {
  position: relative;
  overflow: hidden;
  max-height: 400px;
}

.carousel-item img {
  position: absolute;
  /* 让图片左上角定位到容器中心 */
  top: 50%;
  left: 50%;
  /* 通过反向平移让图片整体居中 */
  transform: translate(-50%, -50%);
  /* 保证图片至少填满容器的宽高 */
  min-width: 100%;
  min-height: 100%;
}

这个方法通过绝对定位把图片拉到容器中心，再用transform调整位置，超出容器的部分会被overflow: hidden截断，最终展示的就是图片的中间区域。

两种方案都不需要修改原始图片，以后调整轮播高度也不用重新处理图片，非常灵活！

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