La imagen del carrusel de Bootstrap no se alinea correctamente

Por favor, eche un vistazo a la siguiente imagen, estamos usando un carrusel de arranque para rotar las imágenes. Sin embargo, cuando el ancho de la ventana es grande, la imagen no se alinea correctamente con el borde.

Pero el ejemplo de carrusel proporcionado por bootstrap siempre funciona bien, sin importar el ancho de la ventana. Siguiendo el código.

¿Alguien puede explicar por qué el carrusel se comporta de manera diferente? ¿Tiene algo que ver con el tamaño de la imagen o falta alguna configuración de arranque?

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

La solución es poner este código CSS en su archivo CSS personalizado:

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

Con bootstrap 3, simplemente agregue las clases responsive y center:

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

Esto automáticamente cambia el tamaño de la imagen y la centra.

Editar:

Con bootstrap 4, simplemente agregue la img-fluidclase

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

Enfrenté el mismo problema y lo resolví de esta manera: es posible insertar contenido que no sea de imagen en Carousel, para que podamos usarlo. Primero debe insertar div.inner-item(donde hará la alineación central) y luego insertar la imagen dentro de este div.

Aquí está mi 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>

Y mi código css (.scss):

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

Si bien la respuesta de vekozlov funcionará en Bootstrap 3 para centrar su imagen, se romperá cuando el carrusel se reduzca: la imagen conserva su tamaño en lugar de reducirse con el carrusel.

En su lugar, haz esto en el carrusel de nivel superior div:

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

Esto centrará todo el carrusel y evitará que crezca más allá del ancho de tus imágenes (es decir, 900 px o lo que quieras configurar). Sin embargo, cuando el carrusel se reduce, las imágenes se reducen con él.

Debería poner esta información de estilo en su archivo CSS / LESS, por supuesto.

En Bootstrap 4, puede agregar una mx-autoclase a su imgetiqueta.

Por ejemplo, si su imagen tiene un ancho del 75%, debería verse así:

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

Bootstrap se traducirá automáticamente mx-autoa:

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

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

Podría tener algo que ver con tus estilos. En mi caso, estoy usando un enlace dentro del div principal "elemento", así que tuve que cambiar mi hoja de estilo para decir lo siguiente:

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

bajo el código boostrap preexistente:

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

y mi imagen se ve así:

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

Creo que tengo una solución:

En su página de hoja de estilo personal, asigne el ancho y el alto para que coincidan con las dimensiones de su imagen.

Cree una "clase" adicional separada en ese div superior que se apropie del espacio con tramos ... (se muestra a continuación)

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

Sin tocar el archivo bootstrap.css, en su propia hoja de estilo, llame a "carrusel" (o cualquier etiqueta que elija) para que coincida con el ancho y alto de su foto original.

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

}

Entonces, en mi caso, estoy usando imágenes pequeñas de 320x200 para el carrusel. Probablemente haya dimensiones preestablecidas en bootstrap.css, pero no me gusta cambiar eso, así que puedo intentar estar al día con futuras versiones. Espero que esto ayude ~~

Estoy enfrentando el mismo problema contigo. Basado en la pista de @thuliha, los siguientes códigos han resuelto mis problemas.

En el htmlarchivo, modifique como el siguiente ejemplo:

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

En carousel.css, modifique la clase:

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

Prueba esto

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

¿Tus imágenes tienen exactamente un ancho de 460px como el span6? En mi caso, con diferentes tamaños de imagen, pongo un atributo de altura en mis imágenes para asegurarme de que todas tengan la misma altura y que el carrusel no cambie de tamaño entre imágenes.

En su caso, intente establecer una altura para que la relación entre esta altura y el ancho de su div interior del carrusel sea la misma que la relación de aspecto de sus imágenes

La solución de @Art L. Richards no funcionó. ahora en bootstrap.css, el código original se ha vuelto así.

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

El código de @ rnaka530 rompería la característica fluida de bootstrap.

No tengo una buena solución, pero la arreglé. Observé el ejemplo del carrusel de bootstrap con mucho cuidado http://twitter.github.com/bootstrap/javascript.html#carousel .

Descubrí que el ancho de img tiene que ser mayor que el ancho de la cuadrícula. En span9, el ancho es de hasta 870 px, por lo que debe preparar una imagen de más de 870 px. Si tiene más contenedor fuera del img, ya que todo el contenedor tiene un borde o un margen, puede usar una imagen con un ancho menor.

Para el carrusel, creo que todas las imágenes deben tener exactamente la misma altura y ancho.

Además, cuando vuelva a consultar la página de andamios de bootstrap, estoy bastante seguro de que span16 = 940px. Con esto en mente, creo que podemos suponer que si tiene un

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

Entonces, sí, debe tener cuidado al configurar el espacio de los intervalos dentro de una fila porque si el ancho de la imagen es demasiado grande, enviará su div a la siguiente "fila" y eso no es divertido: P

Enlace 1

Inserte esto en la clase div principal css donde está su carrusel.

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