загрузочная карусель 4 одинаковой высоты для разных размеров изображения и размеров экрана

Question

Вот пример карусели от w3schools.

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

, чтобы сделать карусель отзывчивой. Я добавил следующее в css:

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: block !important;
}

На моем веб-сайте у меня есть несколько изображений, имеющих одинаковые размеры (высота 300 пикселей и ширина 600 пикселей), кроме толькоодин из них имеет высоту 300 пикселей и ширину 300 пикселей).Поэтому в css я установил:

.carousel-item>img{
    max-height: 300px;
}

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

Но когда я изменяю размер страницы или открываю ее на устройстве меньшего размера, так как карусельотзывчив, высота уменьшается.Но высота меньше для изображения шириной 300px и больше для изображений шириной 600px.Поэтому, когда карусель скользит по изображениям, когда изображение достигает размера 300x300, высота увеличивается, а когда изображение достигает размера 600x600, высота уменьшается.

Как сделать так, чтобы высота карусели была одинаковой для всех изображений для всех размеров?

Answer 1

Я обнаружил, что лучший способ решить эту проблему, чтобы изображения подходили под все размеры экрана, - это обеспечить обрезку всех ваших изображений до одинакового размера.

Я использовал этот онлайн-инструмент https://pixlr.com/editor/.

Обрезать мои изображения, выбрав значок обрезки, затем выбрав соотношение сторон и обрезав до 1200x480.

Это решило проблему для меня.

Answer 2

Решение, которое мне подходит, - установить максимальную высоту для медиазапросов.Например:

@media (max-width: 688px) {
    .carousel-item>img {
        max-height: 146px;
    }
}

Чтобы получить значение максимальной высоты, я сослался на элемент проверки.