Obraz karuzeli Bootstrap nie jest prawidłowo wyrównany

Spójrz na poniższy obraz, używamy karuzeli bootstrap do obracania obrazów. Jednak gdy szerokość okna jest duża, obraz nie jest prawidłowo wyrównany z obramowaniem.

Ale przykład karuzeli dostarczony przez bootstrap zawsze działa dobrze, niezależnie od szerokości okna. Postępując zgodnie z kodem.

Czy ktoś może wyjaśnić, dlaczego karuzela zachowuje się inaczej? Czy ma to coś wspólnego z rozmiarem obrazu lub brakiem jakiejś konfiguracji 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>

Rozwiązaniem jest umieszczenie tego kodu CSS w niestandardowym pliku CSS:

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

Dzięki bootstrap 3 wystarczy dodać responsywne i centralne klasy:

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

Spowoduje to automatyczną zmianę rozmiaru obrazu i wyśrodkowanie obrazu.

Edytować:

W przypadku bootstrap 4 po prostu dodaj img-fluidklasę

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

Zmierzyłem się z tym samym problemem i rozwiązałem go w ten sposób: możliwe jest wstawienie treści niebędącej obrazem do Carousel, abyśmy mogli z niej skorzystać. Powinieneś najpierw wstawić div.inner-item(gdzie zrobisz wyrównanie do środka), a następnie wstawić obraz do tego div.

Oto mój kod (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>

I mój kod css (.scss):

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

Podczas gdy odpowiedź vekozlova będzie działać w Bootstrap 3, aby wyśrodkować obraz, zepsuje się, gdy karuzela zostanie zmniejszona: obraz zachowuje swój rozmiar zamiast zmniejszać go za pomocą karuzeli.

Zamiast tego zrób to na karuzeli najwyższego poziomu div:

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

Spowoduje to wyśrodkowanie całej karuzeli i zapobiegnie jej wykraczaniu poza szerokość obrazów (tj. 900 pikseli lub cokolwiek chcesz ustawić). Jednak gdy karuzela jest zmniejszana, obrazy zmniejszają się wraz z nią.

Oczywiście powinieneś umieścić te informacje o stylu w swoim pliku CSS / LESS.

W Bootstrap 4 możesz dodać mx-autoklasę do swojego imgtagu.

Na przykład, jeśli twój obraz ma szerokość 75%, powinien wyglądać tak:

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

Bootstrap automatycznie przetłumaczy mx-autona:

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

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

To może mieć coś wspólnego z twoimi stylami. W moim przypadku używam łącza w nadrzędnym elemencie div „item”, więc musiałem zmienić arkusz stylów, tak aby brzmiał następująco:

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

pod istniejącym kodem boostrap:

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

a mój obraz wygląda tak:

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

Myślę, że mam rozwiązanie:

Na osobistej stronie arkusza stylów przypisz szerokość i wysokość, aby pasowały do wymiarów obrazu.

Utwórz dodatkową oddzielną „klasę” w tym górnym elemencie DIV, która zajmie przestrzeń za pomocą rozpiętości ... (pokazane poniżej)

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

Bez dotykania pliku bootstrap.css, we własnym arkuszu stylów wywołaj „karuzelę” (lub inną wybraną etykietę), aby dopasować szerokość i wysokość oryginalnego pix!

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

}

Więc w moim przypadku używam małych obrazów 320x200 do karuzeli. Prawdopodobnie w pliku bootstrap.css są wstępnie ustawione wymiary, ale nie lubię ich zmieniać, więc mogę próbować być na bieżąco z przyszłymi wersjami. Mam nadzieję, że to pomoże ~~

Ja mam z tobą ten sam problem. W oparciu o podpowiedź @thuliha poniższe kody rozwiązały moje problemy.

W htmlpliku zmodyfikuj zgodnie z następującym przykładem:

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

W carousel.csszmodyfikuj klasę:

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

Spróbuj tego

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

Czy Twoje obrazy mają szerokość dokładnie 460 pikseli jako rozpiętość6? W moim przypadku, przy różnych rozmiarach obrazów, umieszczam atrybut wysokości na moich obrazach, aby upewnić się, że wszystkie mają tę samą wysokość, a karuzela nie zmienia rozmiaru między obrazami.

W twoim przypadku spróbuj ustawić wysokość tak, aby stosunek między tą wysokością a szerokością twojego wewnętrznego elementu div karuzeli był taki sam, jak współczynnik aspektu twoich obrazów

Rozwiązanie @Art L. Richards nie zadziałało. teraz w bootstrap.css oryginalny kod wygląda tak.

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

Kod @ rnaka530 złamałby płynną funkcję bootstrapa.

Nie mam dobrego rozwiązania, ale naprawiłem to. Bardzo uważnie obserwowałem przykład karuzeli bootstrapa http://twitter.github.com/bootstrap/javascript.html#carousel .

Dowiaduję się, że szerokość img musi być większa niż szerokość siatki. W programie span9szerokość wynosi do 870 pikseli, więc musisz przygotować obraz większy niż 870 pikseli. Jeśli masz więcej kontenera poza obrazem, ponieważ cały kontener ma coś obramowania lub marginesu, możesz użyć obrazu o mniejszej szerokości.

Uważam, że w przypadku karuzeli wszystkie obrazy muszą mieć dokładnie taką samą wysokość i szerokość.

Ponadto, kiedy odwołujesz się do strony szkieletu z bootstrap, jestem prawie pewien, że span16 = 940px. Mając to na uwadze, myślę, że możemy założyć, że jeśli masz rozszerzenie

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

Więc tak, musisz być ostrożny przy ustawianiu odstępów w rzędzie, ponieważ jeśli szerokość obrazu jest zbyt duża, spowoduje to przeniesienie twojego div do następnego "rzędu" i to nie jest zabawne: P

Link 1

Wstaw to w nadrzędnej klasie div css, w której znajduje się karuzela.

<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];
}