Как я могу заставить размер карусели в соотношении 4: 3, используя bootstrap 4.4? - PullRequest
Новая
       24

Как я могу заставить размер карусели в соотношении 4: 3, используя bootstrap 4.4?

1 голос
/ 04 марта 2020

Я пытаюсь использовать twitter- bootstrap 4.4 для создания карусели с миниатюрами. Но я хочу поместить изображение в контейнер с фиксированным соотношением 4: 3, чтобы получить целостный вид независимо от ориентации изображения.

Как заставить контейнер carousel-inner постоянно отображаться в соотношении 4: 3? У меня есть следующее jsFiddle с полным кодом

Вот урезанная версия моей скрипки 

<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel" data-interval="false">
  <!--Slides-->
  <div class="carousel-inner" role="listbox">
    <!--Image 1-->
    <figure class="carousel-item active">
      <picture class="d-block w-100">
        <img class="w-100" style="object-fit:cover;" src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" alt="First slide">
      </picture>
      <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
    </figure>
    <!--/.Image 1-->
  </div>
  <!--/.Slides-->
  <!--Controls-->
  <a class="carousel-control-prev" href="#carousel-thumb" 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="#carousel-thumb" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <!--/.Controls-->
  <!--Thumbnails-->
  <ol class="carousel-indicators">
    <!--Thumbnail 1-->
    <li data-target="#carousel-thumb" data-slide-to="0" class="active">
      <picture>
        <img class="d-block w-100" src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" class="img-thumbnail">
      </picture>
    </li>
    <!--/.Thumbnail 1-->       
  </ol>
  <!--/.Thumbnails-->
</div>
<!--/.Carousel Wrapper-->

1 Ответ

0 голосов
/ 05 марта 2020

По вашему вопросу, ваша проблема не определена идеально, но я попытался, и я пришел к приведенному ниже решению, оформить заказ!

Ваш код имеет класс .w-100 везде, я не знаю почему, но, пожалуйста, удалите его отовсюду и использует CSS вместо этого, если вы хотите применить width: 100%; в каждом изображении.

Я добавил ниже CSS в вашем коде 

ol li img.w-100 {
  height: 100%;
  width: 6vw !important;
}

figure picture img.w-100 {
    width: 100%;
    height: 25rem;
}

!important, используемом здесь из-за преодоления w-100 класс !important.

https://jsfiddle.net/q9d3w17v/1/

...