Question

使用简单的bootstrap Carousel进行课堂作业。我已将图像的最大高度降低到400px，但结果是图像的顶部是唯一显示的内容。我已经尝试在图像上稍微弄乱边缘并且即将裁剪图像以使它们适合但我想我会首先询问社区。

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

Answer 1

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

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

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