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

Pero el carrusel de ejemplo proporcionado por bootstrap siempre funciona bien, no importa el ancho de la ventana. Tras el código.

Puede alguien explicar por qué carrusel se comporta de forma diferente?
Es esto algo que ver con el tamaño de la Imagen o algunos de bootstrap config es el que falta?

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

Bootstrap Carrusel de imágenes que no se alinean correctamente

  • Están todas tus imágenes con el mismo ancho? También, hacer que se extienden a sus .span6 contenedor?
  • todas mis imágenes son la misma anchura y altura. Todos ellos parecen tramo. Para intentar solucionarlo, he intentado crear imágenes con el mismo tamaño como los proporcionados por el bootstrap ejemplo. Pero, es totalmente desordenado el tamaño. Así, puedo pensar que hay un vínculo entre el tamaño de la imagen y el estilo css. Pero, la documentación no describe la relación plenamente.
  • Me encontré con este problema también, y fue bastante frustrante. Para mí, resultó que estaba sucediendo porque el div que contiene el carrusel tenía un ancho fijo que era más ancha que el carrusel.
  • Tal vez ocultar la dirección de correo electrónico habría sido una buena idea 🙂
InformationsquelleAutor Nambi | 2012-05-14

13 Comentarios

  1. 156

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

    .carousel-inner > .item > img {
      margin: 0 auto;
    }
    • esto funcionó para mí! he intentado vekozlov método, pero no funciona, esto funciona! gracias mucho
    • Funcionó! gracias!
    • El altura de el carrusel de cambios para diferentes alturas de las imágenes, por lo que es necesario definir un ancho fijo en el css.
    • Super! Esperemos que esto sólo será ‘built-in’ BS clase, tales como .carrusel-img-centro o algo pronto.
    • Voy a probar el margen, pero me encontré con la adición de height:none a .carousel-inner > .item > img obtiene mejores resultados que el valor predeterminado height:500px
    • Usted debe hacer .carousel-inner > .carousel-item > img { margin: 0 auto; } para el Bootstrap 4.
    • .carousel-inner > .item > a > img { margin: 0 auto; } parece haber funcionado para mí fue muy cerca de @atrepp ‘s respuesta
    • Para el bootstrap-4 la solución es .carousel-inner > .carousel-item > img { margin: 0 auto; }

  2. 121

    Con bootstrap 3, sólo tiene que añadir la capacidad de respuesta y las clases en el centro:

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

    Esto automáticamente hace cambiar tamaño de imagen, y de los centros de la imagen.

    Edición:

    Con bootstrap 4, sólo tiene que añadir el img-fluid clase

    <img class="img-fluid" src="img/....jpg">
    • Tratado de la parte superior votado soluciones en vano. Esto es mucho más limpia, sencilla y trabajado. Gracias!
    • Lean y limpio. Gracias
    • Perfecto gracias. Juro que busqué en google esto antes y no obtuvo respuesta, esto funcionó de inmediato.
    • Estoy usando bootstrap 4 y el img-líquido de clase no es el centrado de las imágenes. Todos ellos están justificados a la izquierda.
    • He encontrado que esto funciona para mí: .carrusel-interior img { margin: auto; }
    • Eso es incorrecto, debe utilizar el texto-centro de la clase. v4-alpha.getbootstrap.com/content/images
    • Estoy teniendo el mismo problema – nunca encontrar una solución?
    • sólo añadir text-center a la <div class="carousel-item"> de la etiqueta de inicio
    • Usted salvó mi día..! a mí me funcionó.

  3. 18

    Me enfrentó el mismo problema y lo resolví de esta manera:
    Es posible insertar la imagen no el contenido del Carrusel, por lo que podemos usarlo.
    Primero debe insertar div.inner-item (donde se hará la alineación centrada) y, a continuación, 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 css-código(.secs):

    .inner-item {
        text-align: center;
        img {
            margin: 0 auto;
        }
    }
    • Gran solución. Gracias por compartirlo…
    • este css trabajado muy bien para mí, además de la fijación de la altura de las imágenes del carrusel
  4. 6

    Mientras vekozlov‘s respuesta va a trabajar en Bootstrap 3 para el centro de la imagen, se va a romper cuando el carrusel es reducido: la imagen conserva su tamaño, en vez de disminuir con el carrusel.

    Lugar, hacer esto en el nivel superior carrusel div:

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

    Este será el centro de todo el carrusel y prevenir su crecimiento más allá de la anchura de las imágenes (es decir, 900 px o lo que usted desea establecer a). Sin embargo, cuando el carrusel está reducida a escala de las imágenes de la escala de abajo con él.

    Debe colocar este estilo info en tu CSS/LESS archivo, por supuesto.

  5. 1

    Podría tener algo que ver con sus estilos. En mi caso, estoy utilizando un enlace dentro de la matriz «elemento» div, por lo que tuve que cambiar mi hoja de estilos a decir lo siguiente:

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

    bajo el preexistentes boostrap código:

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

    y mi imagen se ve como:

    <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>
  6. 1

    Creo que tengo una solución:

    En su hoja de estilo personal página, asignar el ancho & altura para partido tu dimensiones de la imagen.

    Crear un adicional por separado «clase» en la parte superior div que se apropia el espacio con luces…(se Muestra abajo)

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

    Sin tocar el bootstrap.css, en su propia hoja de estilo, llamado «carrusel»(o la etiqueta que usted elija) para que coincida con la anchura y la altura original de su pix!

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

    }

    Así que en mi caso, estoy utilizando pequeñas 320×200 imágenes carrusel con. Probablemente hay dimensiones preestablecido en el bootstrap.css, pero no me gusta que cambiar para que yo pueda tratar de mantenerse al día con los lanzamientos futuros. Espero que esto ayuda a~~

  7. 1

    Me estoy enfrentando el mismo problema con usted. Basado en la sugerencia de @thuliha, los siguientes códigos ha resuelto mis problemas.

    En el html archivo, modificar, como en el siguiente ejemplo:

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

    En el carousel.css, modificar la clase:

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

    Probar este

        .item img{
          max-height: 300px;
          margin: auto;
        }
    • Bienvenido a StackOverflow! Tu respuesta podría beneficiar mucho si quieres explicar un poco cómo esto resuelve la cuestión. Código sólo respuestas no son tan bien recibidos en TAN.
  9. 0

    Hace que sus imágenes tienen exactamente un 460px ancho como el span6 ? En mi caso, con diferentes tamaños de la imagen, puse un atributo de alto en mis imágenes para asegurarse de que son todos de la misma altura y el carrusel de no cambiar el tamaño de las imágenes.

    En su caso, tratar de establecer una altura de modo que la relación entre la altura y la anchura de su carrusel-interior div es la misma que la relación de aspecto de las imágenes

    • no ayuda. ¿Crees que la imagen formato de los asuntos? El bootstrap ejemplo se utiliza archivos JPEG, donde yo estoy usando los archivos PNG. Eso no hace ninguna diferencia.
  10. 0

    @Art L. Richards ‘s solución no funcionó.
    ahora en bootstrap.el css, el código original se ha convertido en algo como esto.

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

    @rnaka530 ‘s código de romper el líquido de la función de arranque.

    No tengo una buena solución, pero me hizo solucionarlo. He observado el bootstrap del carrusel ejemplo muy cuidadosamente http://twitter.github.com/bootstrap/javascript.html#carousel.

    Me enteré de que img width tiene que ser mayor que el ancho de la rejilla. En span9, la anchura es de hasta 870px, así que usted tiene que preparar una imagen más grande que 870px. Si usted tiene más de contenedor fuera de la img, como todo el recipiente tiene una frontera o borde de algo, puede utilizar la imagen con menor anchura.

  11. 0

    Para el carrusel, yo creo que todas las imágenes tienen que ser exactamente la misma altura y anchura.

    También, cuando usted se refiere de nuevo a los andamios de la página de bootstrap, estoy bastante seguro de que span16 = 940px. Con esto en mente, creo que podemos asumir que si usted 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>

    Así que, sí, tienen que ser cuidadosos al establecer los intervalos de espacio dentro de una fila, porque si el ancho de la imagen es de gran tamaño, enviar su div en el siguiente «fila» y que no es divertido 😛

    Link 1

  12. 0

    Insertar esto en el css div padre de la clase donde su carrusel es.

    <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];
    }
  13. 0

    En Bootstrap 4, usted puede agregar mx-auto clase a su img etiqueta.

    Por ejemplo, si la imagen tiene un ancho de 75%, se debe tener este aspecto:

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

    Bootstrap se traducirá automáticamente mx-auto a:

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

Dejar respuesta

Please enter your comment!
Please enter your name here