html - Bootstrap 轮播图片和尺寸

Question

我正在尝试展示响应式轮播。我在幻灯片中有水平和垂直图像(H 尺寸:1400 x 935。V 尺寸:624 x 935)。

问题出现在这个元素中:https://www.luismatera.art/las-matas-via-muerta-i.html

主要问题是每次幻灯片从水平变为垂直时，文本都会上下移动。

我有这个 css 代码(提供 here ):

.carousel-fade .carousel-item, .carousel-item img {max-height: 90vh;}

在 src 图像中:

class="d-block img-fluid"

但是不能正常工作

谁能帮我把文字保持在同一个位置？ (比如 this)

提前致谢。

Answer 1

图像的高度各不相同，因此请尝试添加一个 min-height，这样在更改图像时会有一定的一致性:

.carousel-fade .carousel-item, .carousel-item img {
   max-height: 90vh;
   min-height: 90vh;
}