Зображення каруселі Bootstrap неправильно вирівнюється

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

Але приклад каруселі, наданий bootstrap, завжди працює нормально, незалежно від ширини вікна. Слідуючи коду.

Хтось може пояснити, чому карусель поводиться інакше? Це щось пов’язане з розміром зображення або відсутня якась конфігурація завантажувального файлу?

<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 просто додайте адаптивний та центральний класи:

 <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? У моєму випадку, з різними розмірами зображень, я наношу атрибут висоти на свої зображення, щоб переконатися, що вони мають однакову висоту, і карусель не змінює розмір між зображеннями.

У вашому випадку спробуйте встановити висоту, щоб співвідношення між цією висотою та шириною внутрішнього розділу каруселі було таким, як співвідношення сторін ваших зображень

Рішення @Art L. Richards не склалося. тепер у bootstrap.css оригінальний код став таким.

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

Код @ rnaka530 порушить рідину початкового завантаження.

У мене немає хорошого рішення, але я його виправив. Я дуже уважно спостерігав за прикладом каруселі bootstrap http://twitter.github.com/bootstrap/javascript.html#carousel .

Я з'ясував, що img ширина повинна бути більшою, ніж ширина сітки. В span9, шириною до 870px, так що ви повинні підготувати зображення більше , ніж 870px. Якщо у вас є більше контейнера за межами img, оскільки весь контейнер має межі або поля, ви можете використовувати зображення з меншою шириною.

Що стосується каруселі, я вважаю, що всі зображення повинні мати однакові висоту та ширину.

Крім того, коли ви звертаєтесь до сторінки лісів із bootstrap, я майже впевнений, що 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];
}