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

93

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

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

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

<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>

изображение карусели

Намби
источник
Все ли ваши изображения одинаковой ширины? Кроме того, они растягиваются до своего .span6контейнера?
Андрес Ильич
1
все мои изображения одинаковой ширины и высоты. Все они кажутся растянутыми. Чтобы исправить это, я попытался создать изображения того же размера, что и в примере начальной загрузки. Но это полностью испортило размер. Итак, я думаю, есть связь между размером изображения и стилем CSS. Но в документации отношения не описаны полностью.
Намби
Я тоже столкнулся с этой проблемой, и это меня очень расстраивало. Для меня оказалось, что это происходит потому, что div, содержащий карусель, имел фиксированную ширину, которая была шире, чем карусель.
WuTheFWasThat
Возможно, неплохо было бы скрыть адрес электронной почты :)
tgdn

Ответы:

160

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

.carousel-inner > .item > img {
  margin: 0 auto;
}
Атрепп
источник
1
это сработало для меня! Я пробовал метод векозлова, но не работает, работает!
Большое
Высота карусели изменяется для различных высот изображений, так что вам нужно будет определить фиксированную ширину в CSS.
QuantumHive 02
Супер! Надеюсь, скоро это будет просто «встроенный» класс BS, такой как .carousel-img-center или что-то в этом роде.
CodeFinity 03
Я попробую использовать маржу, но обнаружил, что добавление height:noneк .carousel-inner > .item > imgдает лучшие результаты, чем значение по умолчаниюheight:500px
CrandellWS
Вы должны сделать это .carousel-inner > .carousel-item > img { margin: 0 auto; }для Bootstrap 4.
Expenzor
125

В 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">
thouliha
источник
9
Пробовал лучшие решения безрезультатно. Это намного чище, проще и работает. Спасибо!
Кайл
2
Худой и чистый. Спасибо
Chiefenne
2
Отлично спасибо. Клянусь, я искал это раньше и не получил ответа, это сразу сработало.
Chud37 03
Я использую bootstrap 4, а класс img-fluid не центрирует изображения. Все они оправданы по левому краю.
Malchesador
2
@iaacp просто добавьте text-centerк <div class="carousel-item">начальному тегу
deanwilliammills 01
18

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

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

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

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

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

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

Даниэль А.А. Пельсмакер
источник
4

В 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;
}
ненависть
источник
1

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

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

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

Создайте дополнительный отдельный «класс» в этом верхнем 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 есть предустановленные размеры, но мне не нравится их менять, поэтому я могу постараться быть в курсе будущих выпусков. Надеюсь, это поможет ~~

rnaka530
источник
1

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

Попробуй это

    .item img{
      max-height: 300px;
      margin: auto;
    }
лала
источник
Добро пожаловать в StackOverflow! Ваш ответ может принести большую пользу, если вы немного объясните, как это решает вопрос. Ответы только на код не так хорошо принимаются на SO.
René Vogt
0

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

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

Себ Сесброн
источник
это не помогает. Как вы думаете, формат изображения имеет значение? В примере начальной загрузки используются файлы JPEG, а я использую файлы PNG. Это имеет значение.
Намби
0

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

Кевин Тонг
источник
0

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

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

rnaka530
источник
0

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