Bootstrap 4 如何使旋转木马以相同的大小显示所有图像,使我的页脚不';你不会被推倒吗?

Bootstrap 4 如何使旋转木马以相同的大小显示所有图像,使我的页脚不';你不会被推倒吗?,bootstrap-4,Bootstrap 4,我的旋转木马有3个图像,其中两个大小相同,一个大约是两倍大小。当大图像加载时,它会向下推我的页脚,页脚就在它下面。如何使所有图像显示为相同大小,或者如何调整旋转木马的高度?以下几点: 理想情况下,所有图像应裁剪为相同大小 在您的情况下,我们可以在图像中添加一个具有任意数字的最大高度条件(我添加了500px,因为这是我选择的图像中的最小高度) 这导致“较高”图像周围出现空白。。。为了突出这一点,我在旋转木马中添加了一个浅粉色背景。。。并将图像居中,因为默认情况下图像将左对齐 工作片段如下:

我的旋转木马有3个图像,其中两个大小相同,一个大约是两倍大小。当大图像加载时,它会向下推我的页脚,页脚就在它下面。如何使所有图像显示为相同大小,或者如何调整旋转木马的高度?

以下几点:

  • 理想情况下,所有图像应裁剪为相同大小
  • 在您的情况下,我们可以在图像中添加一个具有任意数字的最大高度条件(我添加了
    500px
    ,因为这是我选择的图像中的最小高度)
  • 这导致“较高”图像周围出现空白。。。为了突出这一点,我在旋转木马中添加了一个浅粉色背景。。。并将图像居中,因为默认情况下图像将左对齐
工作片段如下:

.carousel项目{
背景色:浅粉色
}
.旋转木马内部img{
最大高度:500px;
左边距:自动;
右边距:自动;
显示:块;
}


您好,请与我们分享样品好吗?使用JSFIDLE或codepen创建和共享链接。请在问题中以文本形式发布相关代码。请参阅