У меня есть серия изображений, вложенных в элемент Bootstrap карусели:
<div class="carousel-inner" role = "listbox">
<div class="carousel-item active">
<img class="d-block w-100 img-fluid" src="images/fullpics/landscapes/Old Sheds Evandale (Acrylic).tiff" alt="First Mage">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
Моя проблема заключается в том, что изображения имеют различную высоту, заставляя изображения «прыгать» вверх и вниз по мере их перехода , но последовательно на правильной ширине. Чтобы получить одинаковую ширину для всех изображений, я должен был установить
> w-100
, хотя я уже настроил изображение как реагирующее img-fluid, которое, как я думал, установит все изображения на w-100 без необходимости добавить то же самое.
Мой вопрос заключается в том, как установить высоту каждого изображения равной, не корректируя размер самого изображения?
Редактировать: после добавления атрибута высоты к вложенному div изображению обрезается в нижней части;
<div class="carousel-inner" style="height:400px;" role = "listbox">
