如何调整Bootstrap carousel高度，实现全屏宽度下图片居中部分展示

• 第一步：调整轮播容器基础配置
  移除原有w-75类替换为w-100保证全屏宽度，添加overflow-hidden隐藏超出高度的图片内容，同时自定义容器高度为你需要的半高值：

  <div
    id="showcase_carousel"
    class="carousel slide carousel-dark w-100 overflow-hidden"
    data-bs-ride="carousel"
    style="height: 400px;"
  >
  

  注：style里的height值可根据你原图片高度的一半自行调整，需要响应式效果可换成height: 50vh，表示占当前视口高度的50%
• 第二步：添加自定义CSS实现图片居中适配
  给轮播项和内部图片添加如下样式，保证图片按比例缩放、居中显示，不会变形：

  #showcase_carousel .carousel-item {
    height: 100%;
  }
  #showcase_carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  

调整完成后轮播会保持全屏宽度，仅显示你设置高度对应的部分图片，超出的上下部分会被隐藏，图片始终在轮播容器内居中显示。

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