Bootstrap карусель - запретить обрезку изображений при изменении высоты и ширины устройства

Question

Я пытаюсь добавить bootstrap карусель, как в примере airbnb . Карусель должна оставаться отзывчивой на всех размерах устройства. Я попытался установить постоянную высоту и ширину контейнера карусели и изображения. Однако изображение обрезается, если высота или ширина области просмотра слишком малы.

Я хочу, чтобы функциональность была точно такой же, как у карусели Airbnb. Изображение не обрезается независимо от размеров области просмотра. Пользователю может потребоваться выполнить вертикальную прокрутку, но изображение будет видно целиком с правильным соотношением сторон.

Если изображение имеет альбомный тип (например, 1000x200), оно должно распространяться по всей ширине. Верхняя и нижняя области должны иметь черные рамки.

Точно так же, если изображение портретного типа (например, 200x1000), оно должно распространяться по всей высоте. Левая и правая области должны иметь черные рамки. Вот мой код, также вставленный в jsfiddle . (Вот обработанная версия jsfiddle ):

@media screen and (min-width: 500px) {
  .commonattr {
    min-width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .commonattr {
    min-width: 400px;
  }
}

@media screen and (max-height: 400px) {
  .carouseltest {
    height: 60vh;
  }
}

.cardcontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.carouselcontainer {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  object-fit: contain;
  /* max-width: none; */
  width: max-content;
}

#carouselExampleIndicators {
  /* min-width: 300px; */
  width: 100vw;
  margin: 0 auto
}

#carousel-bg {
  background-color: black;
}

.carousel-item {
  z-index: 2;
  object-fit: cover;
}

.carouseltest {
  z-index: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 1)0%, rgba(0, 0, 0, 0.8)10%, rgba(0, 0, 0, 0)30%);
  box-sizing: border-box;
  /* height: 600px; */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

.theimage {
  z-index: -1;
  width: 100%;
}

@media screen and (min-width: 420px) {
  #carouselExampleIndicators {
    background: white;
    display: flex;
    width: 25vw;
    height: 100%;
    flex-direction: column;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="cardcontainer">
  <div class="carouselcontainer commonattr">
    <div class="carouselslidecontainer commonattr">
      <div id="carouselExampleIndicators" class="carousel slide commonattr" data-ride="carousel" data-interval="false">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active w-100"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1" class="w-100"></li>
        </ol>
        <div class="carousel-inner" role="listbox" id="carousel-bg">
          <div class="carousel-item item active">
            <div class="carouseltest">
              <img class="theimage" src="images/8.jpg" alt="First slide">
            </div>
          </div>
          <div class="carousel-item item ">
            <div class="carouseltest">
              <img class="theimage" src="images/600x100.png" alt="Second slide">
            </div>
          </div>
        </div>

        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

    </div>

  </div>
</div>

Скриншоты наших проблемных страниц:

• Страница 1

Мы пытаются сделать что-то вроде этого Пример Airbnb:

• Страница 1
• Страница 2

Это некоторые изображения с сайта Airbnb .

Answer 1

Попробуйте добавить к вашим изображениям класс .img-fluid . Это предотвратит обрезку изображений.

Ссылка здесь https://getbootstrap.com/docs/4.4/content/images/#responsive -изображения

Обновление : добавьте ниже CSS, это будет работать

.theimage{
  object-fit: cover;
  height:100%;
  width:100%;
}

Пример здесь https://jsfiddle.net/imam_san/wt7zsjan/9/