css - 如何在 Bootstrap Carousel 上移动图像

Question

使用简单的 bootstrap Carousel 进行类作业。我已将图像的最大高度降低到 400 像素，但结果是图像的顶部是唯一显示的内容。我试过稍微弄乱图片的边距，并打算裁剪图片以使其适合，但我想我会先询问社区。

如何重新校准 boostrap 上的图像决定图像居中的位置？我只是想把图像弄乱，所以图像的中间是现在调整大小的旋转木马上显示的内容？

Answer 1

我认为您可能正在寻找 object-fit: contain css 属性指定后，图像将以最大尺寸显示，但仍保持不变纵横比。

https://www.w3schools.com/css/css3_object-fit.asp

.carousel-item {
  max-height: 200px;  
}

.carousel-item img {
  height: 200px;
  width: 100%;
  object-fit: contain;
}