如何在Bootstrap4中将不同尺寸的图像放入轮播中？

首先让我们看看您在做什么：

仔细查看您在图像元素上添加的类，这d-block意味着图像display将被设置为，block并且w-100宽度将为100％。在这里阅读更多。

现在，您的第二张（狗）图像的高度与宽度相比太大了，并且没有max-height设置，它将扩展轮播。

首先，让我们w-100从狗图像项中删除该类。

现在让我们添加一些css：

.carousel-item img {
  margin: 0 auto; /* this will align the image to center. */
  width: auto; /* for those images which don't have a width specified, but has a max-height will be auto adjusted */
}

如上所述，您已经了解了哪个属性将处理哪些值。

现在是在页面加载初始时检查转盘高度的时候了，因此，每当文档准备就绪时，我们都会使用#carouselwithIndicators选择器来检查转盘高度。然后将此高度值应用于轮播中的所有图像。

这是JS：

$(document).ready(function(){
  console.log($('#carouselwithIndicators').css('height')); // check the initial height of the carousel;

  // now apply this height as a max-height on all the image items; css will handle the rest;
  $('#carouselwithIndicators').find('.carousel-item img').css('max-height', $('#carouselwithIndicators').css('height'))
});

现在看一下代码片段：

.carousel-item img {
  margin: 0 auto; /* this will align the image to center. */
  width: auto; /* for those images which don't have a width specified, but has a max-height will be auto adjusted */
}