5

Скажите пожалуйста, как изменить высоту карусели Bootstrap? Чтобы весь контент сохранялся, а в идеале и пропорции изображения.

2
  • Поясните, что значит "весь контент сохранялся"? Добавьте в вопрос свой код, чтобы стало понятнее, какого именно результата вы добиваетесь. 15 июн 2016 в 19:44
  • @Александр, если ответ помог Вам в решении задачи, пожалуйста, отметьте его галкой, расположенной слева, под стрелками голосования.
    – user177227
    6 июл 2016 в 22:35

1 ответ 1

9

Растянуть изображения на всю ширину страницы

.carousel-inner img {
  height: auto;
  width: 100%;
}

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel-inner img {
  height: auto;
  width: 100%;
}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 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" role="listbox">
    <div class="item active">
      <img src="//placehold.it/500x300/c69/f9c/" alt="">
      <div class="carousel-caption">
        <h3>Первый слайд</h3>
      </div>
    </div>
    <div class="item">
      <img src="//placehold.it/650x250/9c6/cf9/" alt="">
      <div class="carousel-caption">
        <h3>Второй слайд</h3>
      </div>
    </div>
    <div class="item">
      <img src="//placehold.it/800x200/69c/9cf/" alt="">
      <div class="carousel-caption">
        <h3>Третий слайд</h3>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Задать карусели определённую высоту

Высота .carousel-inner img задаёт высоту изображений, а высота .carousel - высоту всей карусели.

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

От высоты карусели зависит размер боковых панелей, на которые нажимают, чтобы перейти к соседнему слайду.

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

.carousel {
  height: 500px !important;
}
.carousel-inner img {
  height: 400px !important;
  margin: 0 auto;
}
.carousel-indicators li {
  border-color: #000;
}
.carousel-indicators .active {
  background-color: #000;
}

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel {
  height: 500px !important;
}
.carousel-inner img {
  height: 400px !important;
  margin: 0 auto;
}
.carousel-indicators li {
  border-color: #000;
}
.carousel-indicators .active {
  background-color: #000;
}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 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" role="listbox">
    <div class="item active">
      <img src="//placehold.it/500x300/c69/f9c/" alt="">
      <div class="carousel-caption">
        <h3>Первый слайд</h3>
      </div>
    </div>
    <div class="item">
      <img src="//placehold.it/650x250/9c6/cf9/" alt="">
      <div class="carousel-caption">
        <h3>Второй слайд</h3>
      </div>
    </div>
    <div class="item">
      <img src="//placehold.it/800x200/69c/9cf/" alt="">
      <div class="carousel-caption">
        <h3>Третий слайд</h3>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

То и другое одновременно

Отменяем ограничение на max-width и используем min-width: 100%; вместо width: 100%;, чтобы слишком широкие изображения выходили за края экрана и сохраняли свои пропорции.

Чтобы отцентрировать изображения, края которых выходят за границы экрана, нуженposition: absolute; left: 50%; transform: translateХ(-50%); вместо margin: 0 auto;.

Точно так же позволяем изображениям выходить за верхний и нижний края карусели. Задаём им минимальную высоту и центрируем их по вертикали.

https://jsfiddle.net/glebkema/601g6n69/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel {
  height: 400px !important;
  overflow: hidden;
}
.carousel-inner {
  overflow: visible;
}
.carousel-inner img {
  left: 50%;
  max-width: none !important;
  min-height: 400px;
  min-width: 100%;
  position: absolute;
  top: 200px;
  transform: translate(-50%,-50%);
}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 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" role="listbox">
    <div class="item active">
      <img src="//placehold.it/500x300/c69/f9c/" alt="">
      <div class="carousel-caption">
        <h3>Первый слайд</h3>
      </div>
    </div>
    <div class="item">
      <img src="//placehold.it/650x250/9c6/cf9/" alt="">
      <div class="carousel-caption">
        <h3>Второй слайд</h3>
      </div>
    </div>
    <div class="item">
      <img src="//placehold.it/800x200/69c/9cf/" alt="">
      <div class="carousel-caption">
        <h3>Третий слайд</h3>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

3
  • А как сделать изображение на всю ширину но с фиксированной высотой? Допустим в 400 px. 15 июн 2016 в 20:04
  • @Александр Можно объединить оба варианта, но пропорции изображения исказятся. Добавил пример в ответ. 15 июн 2016 в 20:10
  • @Александр Переделал ответ, чтобы сохранить пропорции слишком широких изображений. Дал им выйти за края экрана и отцентрировал. 15 июн 2016 в 21:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.