Изображение Bootoutrap Carousel не выравнивается должным образом

Ответ 1

Решение состоит в том, чтобы поместить этот код css в ваш пользовательский файл css

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

Ответ 2

С bootstrap 3 просто добавьте отзывчивые и центральные классы:

 <img class="img-responsive center-block" src="img/....jpg" alt="First slide">

Это автоматически изменяет размер изображения и центрирует изображение.

Edit:

С bootstrap 4 просто добавьте класс img-fluid

<img class="img-fluid" src="img/....jpg">

Ответ 3

Я столкнулся с той же проблемой и решил ее так: Возможно вставить содержимое без изображения в карусель, чтобы мы могли его использовать. Сначала нужно вставить div.inner-item (где вы будете выравнивать центр), а затем вставить изображение внутри этого div.

Вот мой код (Ruby):

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <%= image_tag "couples/1.jpg" %>
        </div> 
        <% (2..55).each do |t|%>
            <div class="item">
                <div class='inner-item'>
                    <%= image_tag "couples/#{t}.jpg" %>
                </div>
            </div> 
        <% end -%>
    </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>
</div>

И мой css-код (.scss):

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}

Ответ 4

В то время как vekozlov ответ будет работать в Bootstrap 3 для центрирования вашего изображения, он будет разорваться, когда карусель будет уменьшен: изображение сохраняет свой размер вместо масштабирования с помощью карусель.

Вместо этого сделайте это на каруселе верхнего уровня div:

<div id="my-carousel" class="carousel slide"
    style="max-width: 900px; margin: 0 auto">
    ...
</div>

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

Вы должны поместить эту информацию о стилизации в свой файл CSS/LESS, конечно.

Ответ 5

Я думаю, что у меня есть решение:

На странице личного листа стиля присвойте ширине и высоте соответствие вашим размерам изображения.

Создайте дополнительный отдельный класс в этом верхнем div, который присваивает пространство пробелам... (показано ниже)

        <div class="span6 columns" class="carousel">
            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                <div class="item active">

Не касаясь bootstrap.css, в вашей собственной таблице стилей, вызовите "карусель" (или любой другой ярлык, который вы выберете), чтобы соответствовать ширине и высоте исходного пикселя!

.carousel       {
            width: 320px;
            height: 200px;

}

Итак, в моем случае, я использую небольшие изображения 320х200 для карусели. Вероятно, предустановленные размеры в bootstrap.css, но мне не нравится это менять, поэтому я могу попытаться оставаться в курсе будущих выпусков. Надеюсь, это поможет ~~

Ответ 6

Это может иметь какое-то отношение к вашим стилям. В моем случае я использую ссылку в родительском элементе "item", поэтому мне пришлось изменить таблицу стилей, чтобы сказать следующее:

.carousel .item a > img {
  display: block;
  line-height: 1;
}

в соответствии с ранее существовавшим кодом форварда:

.carousel .item > img {
  display: block;
  line-height: 1;
}

и мое изображение выглядит следующим образом:

<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>

Ответ 7

Имеются ли у ваших изображений ровно 460px ширина как span6? В моем случае, с разными размерами изображений, я помещаю атрибут высоты на свои изображения, чтобы быть уверенным, что они имеют одинаковую высоту, а карусель не изменяет размер между изображениями.

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

Ответ 8

Для карусели, я считаю, что все изображения должны быть одинаковой высоты и ширины.

Кроме того, когда вы ссылаетесь на страницу строительных лесов из бутстрапа, я уверен, что span16 = 940px. Имея это в виду, я думаю, мы можем предположить, что если у вас есть

<div class="row">
     <div class="span4"> 
        <!--left content div guessing around 235px in width -->
     </div>
     <div class="span8">
        <!--right content div guessing around 470px in width -->
     </div>
</div>

Итак, вы должны быть осторожны при установке пространства пробелов в строке, потому что, если ширина изображения велика, он отправит ваш div в следующую "строку", и это не весело: P

Ссылка 1

Ответ 9

Решение @Art L. Richards не получилось. теперь в bootstrap.css, исходный код стал таким.

.carousel .item > img {
  display: block;
  line-height: 1;
}

@rnaka530-код сломал бы флюидную функцию бутстрапа.

У меня нет хорошего решения, но я это исправить. Я очень внимательно наблюдал пример бутстрап-карусели http://twitter.github.com/bootstrap/javascript.html#carousel.

Я узнаю, что ширина img должна быть больше ширины сетки. В span9 ширина составляет до 870 пикселей, поэтому вам нужно подготовить изображение размером более 870 пикселей. Если у вас больше контейнера вне img, так как все контейнеры имеют границу или маржу, вы можете использовать изображение с меньшей шириной.

Ответ 10

Вставьте это в родительский div-класс css, где находится ваша карусель.

<div class="parent_div">
     <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <img src="assets/img/slider_1.png" alt="">
                <div class="carousel-caption">
                </div>
              </div>
            </div>
     </div>      
</div>

CSS

.parent_div { 
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}

Ответ 11

Я столкнулся с той же проблемой с тобой. Основываясь на намеке @thuliha, следующие коды решили мои проблемы.

В файле html измените следующий пример:

<img class="img-responsive center-block" src=".....png" alt="Third slide">

В carousel.css, измените класс:

.carousel .item {
  text-align: center;
  height: 470px;
  background-color: #777;
}

Ответ 12

Попробуйте

    .item img{
      max-height: 300px;
      margin: auto;
    }