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

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

Но пример карусели, предоставляемый бутстрапом, всегда работает нормально, независимо от ширины окна. Следуя коду.

Может кто-нибудь объяснить, почему карусель ведет себя по-другому? Это как-то связано с размером изображения или отсутствует какая-то конфигурация начальной загрузки?

<section id="carousel">
<div class="hero-unit span6 columns">
    <h2>Welcome to TACT !</h2>
    <div id="myCarousel" class="carousel  slide" >
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item  active" >
            <img alt=""  src="/eboxapps/img/3pp-1.png">
            <div class="carousel-caption">
                <h4>1. Need a 3rd party jar?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-2.png">
            <div class="carousel-caption">
                <h4>2. Create Request</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-3.png">
            <div class="carousel-caption">
                <h4>3. What happens?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-4.png">
            <div class="carousel-caption">
                <h4>4. Status is Emailed</h4>
            </div>
        </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>
    </div>
</div>

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

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

В bootstrap 3 просто добавьте классы responseive и center:

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

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

Редактировать:

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

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

Я столкнулся с той же проблемой и решил ее следующим образом: в карусель можно вставлять контент, не являющийся изображением, чтобы мы могли его использовать. Сначала вы должны вставить 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;
    }
}

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

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

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

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

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

В Bootstrap 4 вы можете добавить mx-autoкласс в свойimg тег.

Например, если ваше изображение имеет ширину 75%, оно должно выглядеть так:

<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">

Bootstrap автоматически переведет mx-autoна:

ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

Это могло иметь какое-то отношение к вашим стилям. В моем случае я использую ссылку в родительском div "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>

Думаю, у меня есть решение:

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

Создайте дополнительный отдельный «класс» в этом верхнем 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;

}

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

У меня с тобой такая же проблема. Основываясь на подсказке @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;
}

Попробуй это

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

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

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

Решение @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, так как у всего контейнера есть граница или что-то поле, вы можете использовать изображение с меньшей шириной.

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

Кроме того, когда вы возвращаетесь к странице строительных лесов из начальной загрузки, я почти уверен, что 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

Вставьте это в родительский класс 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];
}