Bootstrap карусель настройки авто высота не работает

Question

Я не нахожу способ установить Авто высоту на изображении в карусели Bootstrap. Единственный способ, как я обнаружил, имеет автоматическую высоту на изображении - это, но, как показано на рисунке, margin:auto создает верхний и нижний поля для разметки. Как я мог удалить это? Если я удалю margin:auto, height:auto больше не будет работать.

HTML

<div id="carousel-{{$kit->kitNo}}" class="carousel slide" data-ride="carousel">                  
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="img-fluid" src="http://www.lebureauculturel.ch/wp-content/uploads/2017/09/goprohero5black.png" alt="First slide">
    </div>
  </div>
</div>

CSS

.carousel-inner {
 height:auto;
}
.carousel-inner > .carousel-item > img,
.carousel-inner > .carousel-item > a > img {
  width: 100%;
  margin: auto;
  min-height:initial;
}

С большим img, например, всплывающее окно исчезает с экрана.

Answer 1

Установите высоту элемента карусели на авто или Просто добавьте класс h-auto вместе с элементом карусели. У меня это сработало.

Answer 2

У меня была такая же проблема, и я не нашел подходящего ответа.

У меня были подписи к изображению, и если они реагировали, они читались бы маленькими.

Способ преодоления проблемы, который не отвечает на ваш вопрос, я выбираю подходящие изображения, которые слева при кадрировании выглядели хорошо. Текст оставался прежним по размеру, что облегчало его чтение на мобильном телефоне.

Таким образом, изображение оставалось на одной высоте, независимо от размера экрана, но, очевидно, было обрезано до размера экрана.

Keith