Ширина и высота карусели бутстрапа

Я пытаюсь сделать кастрюлю с начальной загрузкой с полной шириной для изображений (ширина: 100%) и фиксированной высотой, но если я задаю ширину до 100%, высота автоматически будет принимать на 100%

Я не уверен, что проблема в моих файлах

 <div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
  <div class="active item">
    <%= image_tag "slider/slide-bg-1.jpg", class: "tales" %>
  </div>
  <div class="item">
    <%= image_tag "slider/slide-bg-2.jpg", class: "tales" %>
  </div>
  <div class="item"> 
    <%= image_tag "slider/slide-bg-3.jpg", class: "tales" %>
  </div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

и мой файл css

.tales {
  width: 100%;
  height: 200px;
}

Ответы

Ответ 1

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

.tales {
  width: 100%;
}
.carousel-inner{
  width:100%;
  max-height: 200px !important;
}

Тем не менее, лучший способ справиться с этим ответственно - это использование медиа-запросов, таких как:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

Ответ 2

Если вы используете bootstrap 4 Alpha, и у вас есть ошибка с высотой изображений в хроме, у меня есть решение: В документации к бутстрапу 4 сказано следующее:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Third slide">
    </div>
  </div>
</div>

Решение:

Решение состоит в том, чтобы поместить "div" вокруг изображения с классом ".container", например:

<div class="carousel-item active">
  <div class="container">
    <img src="images/proyecto_0.png" alt="First slide" class="d-block img-fluid">
  </div>
</div>

Ответ 3

Я рекомендую следующее для Bootstrap 3

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  min-height: 500px;    /* Set slide height here */

}

Ответ 4

Я знаю, что это старший пост, но Bootstrap все еще жив и пинает!

Немного отличается от @Eduardo post, мне пришлось изменить:

#myCarousel.carousel.slide {
    width: 100%; 
    max-width: 400px; !important
}

Когда я только изменил .carousel-inner {}, фактическое изображение было фиксированным размером, но элементы управления влево/вправо отображались некорректно на стороне div.

Ответ 5

Эй, ребята, у меня была такая же проблема,

моя высота изменяется на исходную высоту, а мой слайд был оживляющий влево (в реагирующей сайт)

поэтому я исправил его только с помощью CSS:

.carousel .item.left img{
    width: 100% !important;
}

Ответ 6

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

.carousel-item { height: 600px !important; }

однако это не сделает размер изображения динамическим, он просто обрежет изображение до его размера.

Ответ 7

просто поместите height = "400px" в атрибут изображения, например,

<img class="d-block w-100" src="../assets/img/natural-backdrop.jpg" height="400px" alt="First slide">