Obraz karuzeli Bootstrap nie jest prawidłowo wyrównany

93

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>

obraz karuzeli

Nambi
źródło
Czy wszystkie Twoje obrazy mają tę samą szerokość? Czy rozciągają się do swojego .span6pojemnika?
Andres Ilich
1
wszystkie moje obrazy mają taką samą szerokość i wysokość. Wszystkie wydają się rozciągać. Aby spróbować to naprawić, próbowałem utworzyć obrazy o takim samym rozmiarze, jak podano w przykładzie ładowania początkowego. Ale to całkowicie pomieszało rozmiar. Myślę więc, że istnieje związek między rozmiarem obrazu a stylizacją CSS. Ale dokumentacja nie opisuje w pełni relacji.
Nambi
Natknąłem się również na ten problem i to było dość frustrujące. Dla mnie okazało się, że dzieje się tak, ponieważ element div zawierający karuzelę miał stałą szerokość, która była szersza niż karuzela.
WuTheFWasThat
Być może ukrycie adresu email byłoby dobrym pomysłem :)
tgdn

Odpowiedzi:

160

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

.carousel-inner > .item > img {
  margin: 0 auto;
}
atrepp
źródło
1
to zadziałało dla mnie! próbowałem metody vekozlov, ale nie zadziałało, to działa!
wielkie
Wysokość karuzeli zmienia się na różnych wysokościach zdjęć, więc trzeba by określić stałą szerokość w CSS.
QuantumHive
Wspaniały! Miejmy nadzieję, że będzie to po prostu „wbudowana” klasa BS, taka jak .carousel-img-center lub coś wkrótce.
CodeFinity
Spróbuję marginesu, ale stwierdziłem, że dodanie height:nonedo .carousel-inner > .item > imgdaje lepsze wyniki niż domyślneheight:500px
CrandellWS
Powinieneś zrobić .carousel-inner > .carousel-item > img { margin: 0 auto; }dla Bootstrap 4.
Expenzor
125

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">
thouliha
źródło
9
Bezskutecznie wypróbowałem najpopularniejsze rozwiązania. Jest to znacznie czystsze, prostsze i działające. Dziękuję Ci!
Kyle
2
Szczupłe i czyste. Dzięki
Chiefenne
2
Perfekcyjnie, dziękuję. Przysięgam, że szukałem tego w Google i nie otrzymałem odpowiedzi, to zadziałało od razu.
Chud37
Używam programu bootstrap 4, a klasa img-fluid nie wyśrodkowuje obrazy. Wszyscy są usprawiedliwieni.
Malchesador
2
@iaacp po prostu dodaj text-centerdo <div class="carousel-item">tagu początkowego
deanwilliammills
18

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;
    }
}
vekozlov
źródło
ten css działał dla mnie świetnie, oprócz poprawiania wysokości obrazów w karuzeli
SporkInventor
6

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.

Daniel AA Pelsmaeker
źródło
5

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;
}
hatef
źródło
1

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>
Art L. Richards
źródło
1

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

rnaka530
źródło
1

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;
}
Tung
źródło
1

Spróbuj tego

    .item img{
      max-height: 300px;
      margin: auto;
    }
lala
źródło
Witamy w StackOverflow! Twoja odpowiedź może bardzo pomóc, jeśli wyjaśnisz trochę, jak to rozwiązuje pytanie. Odpowiedzi zawierające tylko kod nie są tak dobrze odbierane w SO.
René Vogt
0

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

Seb Cesbron
źródło
to nie pomaga. Czy uważasz, że format obrazu ma znaczenie? Przykład bootstrap używa plików JPEG, a ja używam plików PNG. Czy to robi jakąkolwiek różnicę.
Nambi
0

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.

Kevin Tong
źródło
0

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

rnaka530
źródło
0

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];
}
Jay Tiedra
źródło