esto parece como un trivial pregunta, pero después de un par de horas jugando con la cuenta de Twitter Bootstrap carrusel en su ejemplo (http://twitter.github.io/bootstrap/examples/carousel.html) me resort a MODO de ayuda.

Quiero el carrusel para mostrar el ancho completo (como ahora), pero no con una recortada a la altura. He tratado de ajuste min-altura, altura, etc. 100% en diferentes contenedores, pero sin resultado. Cualquiera de los dos centavos?

InformationsquelleAutor Lasse | 2013-04-15

6 Comentarios

  1. 7

    Desde el ejemplo de carrusel en el proceso de arranque de sitio, si el tamaño de la ventana del navegador, verás que la imagen que se está realmente estirado en el eje de las x. Para lograr el mismo efecto, el uso de sus CSS:

    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 500px;
    }

    Los dos últimos atributos, min-width y height, son de importancia. La altura se establece el tamaño deseado de la calesita.

    Por último, usted querrá usar las etiquetas img para colocar su imagen, en lugar de una imagen de fondo. He aquí un ejemplo más completo:

    <div class="item">
        <img src="image.jpg" />
        <div class="container">
            <div class="carousel-caption">
                <h1>Header</h1>
                <p class="lead">This is a caption</p>
                <a class="btn btn-large btn-primary" href="#">Large Button</a>
            </div>
        </div>
    </div>

    Espero que esto ayude. Saludos!

    • Debo añadir que este fragmento de código fue para el Bootstrap v2, que podría no ser compatible con versiones posteriores de Bootstrap
  2. 1

    Creo que tengo una solución simple con CSS cambios? Sólo cambie lo siguiente (de EDAD);

        .carousel {
      /*height: 500px; OLD*/
      /*margin-bottom: 60px; OLD*/
    
      /*max-width:1200px; THIS IS OPTIONAL (ANY SIZE YOU LIKE)*/
      margin:0 auto 60px;
    }
    
    .carousel .item {
        /*height: 500px; OLD*/
        /*background-color: #777; OLD*/
    
        width:100%;
        height:auto;
    }
    .carousel-inner > .item > img {
      /*position: absolute; OLD+WHY?*/
      /*top: 0; OLD+WHY?*/
      /*left: 0; OLD+WHY?*/
    
      min-width:100%;
      height:auto;
    }
  3. 1

    Utilizar lo siguiente para cada imagen que desee insertar en la diapositiva:

    <img class="img-responsive center-block" src="#"> 
  4. 1

    A pesar de que esto se remonta a 3 años, la solución dada por ‘Nate Cervezas’ resuelto mi problema, cuando se utiliza Bootstrap 3.3.7

    Porque ‘max-width establece el ancho máximo del elemento que reemplaza el ancho de la propiedad cuando la anchura es mayor que max-width.

    También «min-width’ siempre prevalece la ‘max-width’.

    Aquí es un ejemplo en codepen, cambiar el tamaño de la ventana de vista previa para ver cómo funciona.

    De verificación en el siguiente elemento en particular por el cambio de tamaño de la anchura más pequeña posible y comparar con otros 2 elementos i1 y i2.

    <div class="i3">Sample</div>
  5. -2

    Usted puede simplemente cambiar su css para esto, pero que hará que su imagen para la cosecha de lo que no cabe:

    .carousel-inner > .item > img {
       position: absolute;
       top: 0;
       left: 0;
       min-width: 100%;
       min-height: 500px; /* <--- Change this line to min-height */
     }

Dejar respuesta

Please enter your comment!
Please enter your name here