it-swarm.com.ru

Сделать Карусель Bootstrap одновременно центром и отзывчивым?

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

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

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

23
Luke Vo

Теперь (на Bootstrap 3 и 4) это просто: 

.carousel-inner img {
  margin: auto;
}
59
Olivier

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

/*CSS*/
div.c-wrapper{
    width: 80%; /* for example */
    margin: auto;
}

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}

<!--html-->
<div class="c-wrapper">
<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/600x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
        <div class="item">
      <img src="http://placehold.it/500x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/700x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>
</div>

Это создает «скачок» из-за переменной высоты ..., чтобы решить это, попробуйте что-то вроде этого: Выберите самое высокое изображение из списка

Или используйте медиа-запрос, чтобы установить собственную фиксированную высоту.

33
Ryan

В Bootstrap 4 просто добавьте mx-auto к вашему классу изображений карусели. 

<div class="carousel-item">
  <img class="d-block mx-auto" src="http://placehold.it/600x400" />
</div> 

Объедините с образцами из документации по загрузке карусели по желанию.

4
rox
.carousel-inner > .item > img {
    margin: 0 auto;
}

Это простое решение сработало для меня

3
FrickeFresh

Добавьте класс к каждому изображению в html-коде карусели, затем с помощью css apply margin: 0 auto.

3
Escendrix

добавь это

.carousel .item img {
   left: -9999px;  /*important */
   right: -9999px;  /*important */
   margin: 0 auto;  /*important */
   max-width: none;  /*important */
   min-width: 100%;
   position: absolute;
}

И, конечно, у одного из родительских div-ов должна быть позиция: относительная, но я считаю, что по умолчанию.

Смотрите здесь: http://paginacrestinului.ro/

3
Adrian Cumpanasu

Используя это на начальной загрузке 3:

#carousel-example-generic{
    margin:auto;
}
1
Vince2017

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

background-size: cover

и для целей размещения, если вы используете загрузчик, я использовал:

background-position: center center /* or whatever position you wanted */
1
Joe Connor

Попробуйте задать ширину в% для изображения в карусели?

.item img {
    width:100%;
}
0
Kevinvhengst

Я поместил <div class="carousel" id...> в другой div с контейнером класса (<div class="container"><div class="carousel" id="my-carousel">...</div></div>). Это тоже решило.

0
ArtFranco

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

Для меня следующее сработало, надеюсь, это может помочь кому-то еще. Я использую бутстрап 4.

.carousel-inner img {       
   display:block;
   height: auto; 
   max-width: 100%;
}
0
Gabriel Gates

в bootstrap v4 я центрирую и заполняю карусель img на экране, используя

<img class="d-block mx-auto" max-width="100%" max-height="100%">

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

html,body{height:100%;}
.carousel,.carousel-item,.active{height:100%;}
.carousel-inner{height:100%;}
0
austin