La imagen del carrusel de Bootstrap no se alinea correctamente

93

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>

imagen de carrusel

Nambi
fuente
¿Todas tus imágenes tienen el mismo ancho? Además, ¿se estiran hasta su .span6contenedor?
Andres Ilich
1
todas mis imágenes tienen el mismo ancho y alto. Todos parecen estirarse. Para intentar solucionarlo, intenté crear imágenes con el mismo tamaño que el proporcionado por el ejemplo de arranque. Pero, arruinó completamente el tamaño. Entonces, creo que hay un vínculo entre el tamaño de la imagen y el estilo CSS. Pero la documentación no describe completamente la relación.
Nambi
También encontré este problema, y ​​fue bastante frustrante. Para mí, resultó que estaba sucediendo porque el div que contenía el carrusel tenía un ancho fijo que era más ancho que el carrusel.
WuTheFWasThat
Quizás ocultar la dirección de correo electrónico hubiera sido una buena idea :)
tgdn

Respuestas:

160

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

.carousel-inner > .item > img {
  margin: 0 auto;
}
atrepp
fuente
1
esto funcionó para mí! He intentado el método vekozlov pero no funcionó, ¡funciona! muchas gracias
ah-shiang han
La altura del carrusel cambia para diferentes alturas de imágenes, por lo que necesitaría definir un ancho fijo en css.
QuantumHive
¡Súper! Con suerte, esto será una clase BS 'incorporada' como .carousel-img-center o algo pronto.
CodeFinity
height:none.carousel-inner > .item > imgheight:500px
CrandellWS
Debería hacerlo .carousel-inner > .carousel-item > img { margin: 0 auto; }para Bootstrap 4.
Expenzor
125

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">
thouliha
fuente
9
Probé las soluciones más votadas en vano. Esto es mucho más limpio, sencillo y trabajado. ¡Gracias!
Kyle
2
Delgado y limpio. Gracias
chiefenne
2
Perfecto, gracias. Juro que busqué en Google esto antes y no obtuve respuesta, esto funcionó de inmediato.
Chud37
Estoy usando bootstrap 4 y la clase img-fluid no está centrando las imágenes. Todos están justificados a la izquierda.
Malchesador
2
@iaacp solo agrega text-centera la <div class="carousel-item">etiqueta de inicio
deanwilliammills
18

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;
    }
}
Vekozlov
fuente
este CSS funcionó muy bien para mí, además de fijar la altura de las imágenes en el carrusel
SporkInventor
6

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.

Daniel AA Pelsmaeker
fuente
3

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;
}
odio
fuente
1

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>
Art L. Richards
fuente
1

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

rnaka530
fuente
1

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;
}
Tung
fuente
1

Prueba esto

    .item img{
      max-height: 300px;
      margin: auto;
    }
lala
fuente
¡Bienvenido a StackOverflow! Su respuesta podría beneficiarse mucho si explicara un poco cómo esto resuelve la pregunta. Las respuestas de solo código no son tan bien recibidas en SO.
René Vogt
0

¿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

Seb Cesbron
fuente
no ayuda. ¿Crees que importa el formato de imagen? El ejemplo de bootstrap usa archivos JPEG, donde estoy usando archivos PNG. Eso hace alguna diferencia.
Nambi
0

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.

Kevin Tong
fuente
0

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

rnaka530
fuente
0

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];
}
Jay Tiedra
fuente