He estado usando Bootstrap carrusel de la clase y ha sido fácil hasta ahora, sin embargo uno de los problemas que he tenido es que las imágenes de los diferentes alturas causa de las flechas para rebotar hacia arriba y hacia abajo para ajustar a la nueva altura..

Este es el código que estoy usando para mi carrusel:

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <img src="image_url_300height"/>
            <div class="carousel-caption">
                <h4>...</h4>
                <p>...</p>
            </div>
        </div>
        <div class="item">
            <img src="image_url_700height" />
        </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>

El problema se ilustra también en este jsfiddle (es cierto que no es mía, he encontrado esto en una pregunta aparte, mientras que tratando de resolver este problema!)

Mi pregunta es: ¿Cómo puedo forzar el carrusel a permanecer en una altura fija (segunda miniatura en el violín) y el centro de imágenes más pequeñas, manteniendo los pies de foto y las flechas en una posición estática en relación a los de carrusel?

13 Comentarios

  1. 82

    Parece bootstrap, less/CSS fuerzas de un sistema automático de altura para evitar el estiramiento de la imagen cuando el ancho tiene que cambiar para ser sensible. Yo la cambié en torno a que el ancho de auto y fijar la altura.

    <div class="item peopleCarouselImg">
      <img src="http://upload.wikimedia.org/...">
      ...
    </div>

    Yo, a continuación, definir img con una clase peopleCarouselImg como este:

    .peopleCarouselImg img {
      width: auto;
      height: 225px;
      max-height: 225px;
    }

    Puedo solucionar mi altura para 225px. Dejo que el ancho de ajustar automáticamente para mantener la relación de aspecto correcta.

    Esto parece funcionar para mí.

    • Poner el código entre dos ` de la marca. Va a mejorar su respuesta legibilidad.
    • Perfecto, Mi única queja sería que no se centra en que la altura de la imagen se reduce, pero este se ve mucho mejor. gracias jduprey!
    • max-height arroja errores missing : after property id
    • lo que si no es una imagen?
    • es la imagen sensible?
    • a continuación, ver la otra respuesta sobre carouselNormalization, ya que he tenido el mismo problema.

  2. 16

    Probar esto (estoy usando SASS):

    .carousel {
      max-height: 700px;
      overflow: hidden;
    
      .item img {
        width: 100%;
        height: auto;
      }
    }

    Usted puede ajustar el .carousel en un .container si usted desea.

    • Excelente! En mi caso, yo sólo necesitaba .carrusel { max-height: 700px; overflow: hidden;}
    • todo esto no funciona si el tamaño de su navegador o Se ve en dispositivos más pequeños, la Solución no es sensible
    • Bueno ! es un trabajo
    • Muchas gracias Anwar! Funciona a la perfección!
  3. 11

    Probar con este código jQuery que normalizar Bootstrap carrusel de diapositivas alturas

    JS:

    function carouselNormalization() {
      var items = $('#carousel-example-generic .item'), //grab all slides
        heights = [], //create empty array to store height values
        tallest; //create variable to make note of the tallest slide
    
      if (items.length) {
        function normalizeHeights() {
          items.each(function() { //add heights to array
            heights.push($(this).height());
          });
          tallest = Math.max.apply(null, heights); //cache largest value
          items.each(function() {
            $(this).css('min-height', tallest + 'px');
          });
        };
        normalizeHeights();
    
        $(window).on('resize orientationchange', function() {
          tallest = 0, heights.length = 0; //reset vars
          items.each(function() {
            $(this).css('min-height', '0'); //reset min-height
          });
          normalizeHeights(); //run it again 
        });
      }
    }

    • No puede editar su respuesta, pero usted necesita para llamar a la función anterior: de la ventana.onload = function() { carouselNormalization(); } Trabajó como un encanto Y es sensible!… Además he encontrado el original aquí: ryanringler.com/blog/2014/08/24/…
    • esto era exactamente lo que estaba buscando. Gracias.
    • Esto merece más upvotes! Gracias, amable señor/señora!
  4. 4

    Aquí está la solución que funcionó para mí; yo lo hice de esta manera como el contenido en el carrusel se generan de forma dinámica a partir de contenido enviado por el usuario (por lo que no podían hacer uso de una altura estática en la hoja de estilos) – Esta solución también debe trabajar con diferentes tamaños de pantallas:

    function updateCarouselSizes(){
      jQuery(".carousel").each(function(){
        //I wanted an absolute minimum of 10 pixels
        var maxheight=10; 
        if(jQuery(this).find('.item,.carousel-item').length) {
          //We've found one or more item within the Carousel...
          jQuery(this).carousel(); //Initialise the carousel (include options as appropriate)
          //Now we iterate through each item within the carousel...
          jQuery(this).find('.item,.carousel-item').each(function(k,v){ 
            if(jQuery(this).outerHeight()>maxheight) {
              //This item is the tallest we've found so far, so store the result...
              maxheight=jQuery(this).outerHeight();
            }
          });
          //Finally we set the carousel's min-height to the value we've found to be the tallest...
          jQuery(this).css("min-height",maxheight+"px");
        }
      });
    }
    
    jQuery(function(){
      jQuery(window).on("resize",updateCarouselSizes);
      updateCarouselSizes();
    }

    Técnicamente esto no es sensible, pero para los propósitos de la on window resize hace que este se comportan rápida.

  5. 2

    La solución dada anteriormente conduce a una situación donde las imágenes pueden ser demasiado pequeños para el carrusel de la caja. Una solución adecuada para el problema de los golpes de los controles es reemplazar Levanta CSS.

    Código Original:

    .carousel-control {
    top: 40%;
    }

    Reemplazar la variable con un valor fijo en el interior de su propia hoja de estilo (300px trabajado en mi diseño):

    .carousel-control {
    top: 300px;
    }

    Esperemos que esto va a resolver su problema.

    • Cuando he implementado esta al lado de los controles de dejar de trabajar como botones y las comillas angulares bajado hasta el fondo.
    • Usted debe usar un valor fijo en lugar de porcentajes porque su envase tiene una altura variable. En mi diseño 300px trabajado. Tal vez usted debe utilizar sobre 150px. Creo que dejó de trabajar como botones porque no hay o son otros de los elementos en la parte superior de los botones.
  6. 2

    En caso de que alguien febrilmente buscando en google para resolver el rebote de las imágenes del carrusel cosa, esto me ayudó:

    .fusion-carousel .fusion-carousel-item img {
        width: auto;
        height: 146px;
        max-height: 146px;
        object-fit: contain;
    }
  7. 1

    Más recientemente estoy probando esta fuente CSS para el Bootstrap carrusel

    La altura del conjunto de 380 debe ser igual a la más grande/más alto de la imagen que se muestra…

    Por favor Votar esta respuesta se basa en las pruebas de usabilidad con el siguiente CSS gracias.

    /* CUSTOMIZE THE CAROUSEL
    -------------------------------------------------- */
    
    /* Carousel base class */
    .carousel {
      max-height: 100%;
      max-height: 380px;
      margin-bottom: 60px;
      height:auto;
    }
    /* Since positioning the image, we need to help out the caption */
    .carousel-caption {
      z-index: 10;
        background: rgba(0, 0, 0, 0.45);
    }
    
    /* Declare heights because of positioning of img element */
    .carousel .item {
      max-height: 100%;
      max-height: 380px;
      background-color: #777;
    }
    .carousel-inner > .item > img {
     /*  position: absolute;*/
      top: 0;
      left: 0;
      min-width: 40%;
      max-width: 100%;
      max-height: 380px;
      width: auto;
      margin-right:auto;
      margin-left:auto;
      height:auto;
    
    }
    • Esto provocó que el lado de navegación de las áreas a ser super oscuro y se veía extraño. Usualmente me gusta usar la mayoría de los actuales respuesta por alguna extraña razón, pero la respuesta sugerida trabajado genial, así que debería haber comenzado allí.
    • usted puede quitar/cambiar la background-color: #777;
  8. 1

    Incluir este JavaScript en el pie de página (después de cargar jQuery):

    $('.item').css('min-height',$('.item').height());
  9. 1

    Si quieres tener este trabajo con imágenes de cualquier altura y sin la fijación de la altura, basta con hacer:

    $('#myCarousel').on("slide.bs.carousel", function(){
         $(".carousel-control",this).css('top',($(".active img",this).height()*0.46)+'px');
         $(this).off("slide.bs.carousel");
    });
  10. 1

    También puede utilizar este código para ajustarse a todos los del carrusel de imágenes.

    .carousel-item{
        width: 100%; /*width you want*/
        height: 500px; /*height you want*/
        overflow: hidden;
    }
    .carousel-item img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    • object-fit: cover hace el truco.
  11. 0

    Puede utilizar esta líneas en el archivo css:

    ul[rn-carousel] {
     > li {
     position: relative;
     margin-left: -100%;
    
     &:first-child {
       margin-left: 0;
       }
      }
    }
  12. 0

    Esta función jQuery funcionado mejor para mí. Estoy usando bootstrap 4 dentro de un tema de WordPress y he usado el completo jQuery de jQuery slim.

    //Set all carousel items to the same height
    function carouselNormalization() {
    
        window.heights = [], //create empty array to store height values
        window.tallest; //create variable to make note of the tallest slide
    
        function normalizeHeights() {
            jQuery('#latest-blog-posts .carousel-item').each(function() { //add heights to array
                window.heights.push(jQuery(this).outerHeight());
            });
            window.tallest = Math.max.apply(null, window.heights); //cache largest value
            jQuery('#latest-blog-posts .carousel-item').each(function() {
                jQuery(this).css('min-height',tallest + 'px');
            });
        }
        normalizeHeights();
    
        jQuery(window).on('resize orientationchange', function () {
    
            window.tallest = 0, window.heights.length = 0; //reset vars
            jQuery('.sc_slides .item').each(function() {
                jQuery(this).css('min-height','0'); //reset min-height
            }); 
    
            normalizeHeights(); //run it again 
    
        });
    
    }
    
    jQuery( document ).ready(function() {
        carouselNormalization();
    });

    Fuente:

    https://gist.github.com/mbacon40/eff3015fe96582806da5

Dejar respuesta

Please enter your comment!
Please enter your name here