A imagem do carrossel de bootstrap não se alinha corretamente

93

Por favor, dê uma olhada na imagem a seguir, estamos usando carrossel de bootstrap para girar as imagens. No entanto, quando a largura da janela é grande, a imagem não se alinha com a borda corretamente.

Mas o exemplo de carrossel fornecido pelo bootstrap sempre funciona bem, não importa a largura da janela. Seguindo o código.

Alguém pode explicar por que o carrossel está se comportando de maneira diferente? Isso tem algo a ver com o tamanho da imagem ou alguma configuração de bootstrap está faltando?

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

imagem de carrossel

Nambi
fonte
Todas as suas imagens têm a mesma largura? Além disso, eles se estendem até o .span6contêiner?
Andres Ilich
1
todas as minhas imagens têm a mesma largura e altura. Todos eles parecem se esticar. Para tentar corrigir, tentei criar imagens com o mesmo tamanho fornecido pelo exemplo de bootstrap. Mas bagunçou completamente o tamanho. Então, eu acho que há uma ligação entre o tamanho da imagem e o estilo do CSS. Mas, a documentação não descreve o relacionamento totalmente.
Nambi
Também tive esse problema e foi bastante frustrante. Para mim, isso estava acontecendo porque a div contendo o carrossel tinha uma largura fixa que era mais larga do que o carrossel.
WuTheFWasThat
Talvez esconder o endereço de e-mail teria sido uma boa ideia :)
tgdn

Respostas:

160

A solução é colocar este código CSS em seu arquivo CSS personalizado:

.carousel-inner > .item > img {
  margin: 0 auto;
}
atrepp
fonte
1
isso funcionou para mim! Eu tentei o método vekozlov, mas não funcionou, funciona! muito obrigado
ah-shiang han
A altura do carrossel muda para diferentes alturas de imagens, então você precisaria definir uma largura fixa em css.
QuantumHive
Super! Esperançosamente, isso será apenas uma classe BS 'embutida', como .carousel-img-center ou algo assim.
CodeFinity
Vou tentar a margem, mas descobri que adicionar height:nonea .carousel-inner > .item > imgobtém melhores resultados do que o padrãoheight:500px
CrandellWS
Você deve fazer .carousel-inner > .carousel-item > img { margin: 0 auto; }para Bootstrap 4.
Expenzor
125

Com o bootstrap 3, basta adicionar as classes responsiva e central:

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

Isso redimensiona automaticamente a imagem e a centraliza.

Editar:

Com o bootstrap 4, basta adicionar a img-fluidclasse

<img class="img-fluid" src="img/....jpg">
Thouliha
fonte
9
Tentei as soluções mais votadas sem sucesso. Isso é muito mais limpo, simples e trabalhado. Obrigado!
Kyle
2
Limpo e limpo. Obrigado
chiefenne
2
Perfeito, obrigado. Eu juro que pesquisei isso no Google antes e não obtive resposta, funcionou imediatamente.
Chud37
Estou usando o bootstrap 4 e a classe img-fluid não está centralizando as imagens. Eles são todos justificados à esquerda.
Malchesador
2
@iaacp basta adicionar text-centerà <div class="carousel-item">tag de início
deanwilliammills
18

Eu enfrentei o mesmo problema e resolvi desta forma: É possível inserir conteúdo não-imagem no Carrossel, para que possamos usá-lo. Você deve primeiro inserir div.inner-item(onde fará o alinhamento central) e, em seguida, inserir a imagem dentro deste div.

Aqui está meu código (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>

E meu código css (.scss):

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}
Vekozlov
fonte
esse css funcionou muito bem para mim, além de fixar a altura das imagens no carrossel
SporkInventor
6

Embora a resposta de vekozlov funcione no Bootstrap 3 para centralizar sua imagem, ela será interrompida quando o carrossel for reduzido: a imagem mantém seu tamanho em vez de ser reduzida com o carrossel.

Em vez disso, faça isso no carrossel de nível superior div:

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

Isso centralizará todo o carrossel e evitará que cresça além da largura de suas imagens (ou seja, 900 px ou o que você deseja definir). No entanto, quando o carrossel é reduzido, as imagens também diminuem.

Você deve colocar essas informações de estilo em seu arquivo CSS / LESS, é claro.

Daniel AA Pelsmaeker
fonte
3

No Bootstrap 4, você pode adicionar mx-autoclasse à sua imgtag.

Por exemplo, se sua imagem tem uma largura de 75%, ela deve ser parecida com esta:

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

O bootstrap será automaticamente traduzido mx-autopara:

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

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

Pode ter algo a ver com seus estilos. No meu caso, estou usando um link dentro do div "item" pai, então tive que alterar minha folha de estilo para dizer o seguinte:

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

sob o código boostrap preexistente:

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

e minha imagem se parece com:

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

Acho que tenho uma solução:

Em sua página de folha de estilo pessoal, atribua a largura e altura para corresponder às dimensões da imagem.

Crie uma "classe" separada adicional nesse div superior que se apropria do espaço com spans ... (mostrado abaixo)

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

Sem tocar no bootstrap.css, em sua própria folha de estilo, chame "carrossel" (ou qualquer rótulo que você escolher) para combinar com a largura e altura de sua imagem original!

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

}

Portanto, no meu caso, estou usando pequenas imagens de 320x200 para carrosséis. Provavelmente há dimensões predefinidas no bootstrap.css, mas não gosto de mudar isso para que possa tentar ficar atualizado com versões futuras. Espero que isso ajude ~~

rnaka530
fonte
1

Estou enfrentando o mesmo problema com você. Com base na dica de @thuliha, os códigos a seguir resolveram meus problemas.

No htmlarquivo, modifique conforme o seguinte exemplo:

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

No carousel.css, modifique a classe:

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

Tente isto

    .item img{
      max-height: 300px;
      margin: auto;
    }
Lala
fonte
Bem-vindo ao StackOverflow! Sua resposta poderia se beneficiar muito se você explicasse um pouco como isso resolve a questão. Respostas apenas em código não são tão bem recebidas no SO.
René Vogt
0

Suas imagens têm exatamente 460px de largura como span6? No meu caso, com tamanhos de imagem diferentes, coloquei um atributo de altura em minhas imagens para ter certeza de que todas têm a mesma altura e o carrossel não se redimensiona entre as imagens.

No seu caso, tente definir uma altura para que a proporção entre essa altura e a largura do seu div interno do carrossel seja a mesma que o aspectRatio de suas imagens

Seb Cesbron
fonte
não ajuda. Você acha que o formato da imagem importa? O exemplo de bootstrap usa arquivos JPEG, onde estou usando arquivos PNG. Isso faz alguma diferença.
Nambi
0

A solução da @Art L. Richards não funcionou. agora em bootstrap.css, o código original ficou assim.

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

O código de @ rnaka530 quebraria o recurso fluido do bootstrap.

Não tenho uma boa solução, mas resolvi. Observei o exemplo de carrossel do bootstrap com muito cuidado http://twitter.github.com/bootstrap/javascript.html#carousel .

Eu descobri que a largura de img tem que ser maior que a largura da grade. Em span9, a largura é de até 870 px, então você deve preparar uma imagem maior do que 870 px. Se você tiver mais container fora do img, já que todo container tem borda ou margem alguma coisa, você pode usar imagem com largura menor.

Kevin Tong
fonte
0

Para o carrossel, acredito que todas as imagens devem ter exatamente a mesma altura e largura.

Além disso, quando você consulta a página de estrutura do bootstrap, tenho certeza de que span16 = 940px. Com isso em mente, acho que podemos assumir que, se você tiver um

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

Então, sim, você deve ter cuidado ao definir o espaço dos spans dentro de uma linha, porque se a largura da imagem for muito grande, ela enviará seu div para a próxima "linha" e isso não é divertido: P

Link 1

rnaka530
fonte
0

Insira isso na classe css pai div onde está seu carrossel.

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