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

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>

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

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

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

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

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.

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

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>

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

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

Tente isto

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

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

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.

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

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