Domanda Twitter Le immagini di diverse altezze del carosello Bootstrap causano le frecce che rimbalzano


Ho usato la classe di carosello di Bootstrap ed è stato semplice finora, tuttavia un problema che ho avuto è che le immagini di altezze diverse fanno sì che le frecce rimbalzino su e giù per adattarsi alla nuova altezza.

Questo è il codice che sto usando per il mio carosello:

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

Il problema è anche illustrato in questo jsfiddle (Certamente non mio, ho trovato questo su una domanda a parte mentre cercavo di risolvere questo problema!)

La mia domanda è: come posso forzare la giostra a rimanere ad un'altezza fissa (seconda miniatura nel violino) e centrare le immagini più piccole mantenendo le didascalie e la freccia in una posizione statica rispetto alla giostra?


55
2017-11-15 04:25


origine


risposte:


Sembra meno bootstrap / CSS forza un'altezza automatica per evitare di allungare l'immagine quando la larghezza deve cambiare per essere reattiva. L'ho acceso per rendere automatica la larghezza e correggere l'altezza.

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

Quindi definisco img con una classe peopleCarouselImg come questo:

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

Ho fissato la mia altezza a 225 px. Ho lasciato che la larghezza si regolasse automaticamente per mantenere le proporzioni corrette.

Questo sembra funzionare per me.


74
2017-11-21 16:10



Prova questo (sto usando SASS):

.carousel {
  max-height: 700px;
  overflow: hidden;

  .item img {
    width: 100%;
    height: auto;
  }
}

Puoi avvolgere il .carousel in un .container se desideri.


15
2018-02-12 07:45



Prova con questo codice jQuery che normalizza le altezze della diapositiva del carosello Bootstrap

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


8
2018-01-25 21:49



Ecco la soluzione che ha funzionato per me; L'ho fatto in questo modo poiché il contenuto nel carousel è stato generato dinamicamente dal contenuto inviato dall'utente (quindi non abbiamo potuto utilizzare un'altezza statica nel foglio di stile) - Questa soluzione dovrebbe funzionare anche con schermi di dimensioni diverse:

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();
}

Tecnicamente questo non è reattivo, ma per i miei scopi il on window resize fa si che questo si comporti responsabilmente.


3
2018-03-09 14:06



La soluzione proposta in precedenza porta a una situazione in cui le immagini potrebbero essere troppo piccole per la scatola di giostra. Una soluzione adeguata al problema dei comandi di bumping consiste nell'override di Bootstraps CSS.

Codice originale:

.carousel-control {
top: 40%;
}

Sostituisci la variabile con un valore fisso all'interno del tuo foglio di stile (300px ha funzionato nel mio design):

.carousel-control {
top: 300px;
}

Speriamo che questo risolva il tuo problema.


2
2018-01-08 09:35



Includi questo JavaScript nel piè di pagina (dopo aver caricato jQuery):

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

1
2017-12-20 09:49



Se vuoi avere questo lavoro con immagini di qualsiasi altezza e senza fissare l'altezza, fai questo:

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

1
2018-01-22 21:17



Nel caso in cui qualcuno stia cercando febbrilmente di risolvere la questione del carosello di immagini rimbalzanti, questo mi ha aiutato:

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

1
2018-05-03 17:57



Più recentemente sto testando questa sorgente CSS per il carosello Bootstrap

L'altezza impostata su 380 deve essere impostata uguale all'immagine più grande / più alta visualizzata ...

Si prega di votare su / giù questa risposta sulla base di test di usabilità con il seguente CSS grazie.

/* 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;

}

0
2017-07-28 18:07



Puoi usare queste linee nel file css:

ul[rn-carousel] {
 > li {
 position: relative;
 margin-left: -100%;

 &:first-child {
   margin-left: 0;
   }
  }
}

0
2017-07-18 22:43



 .className{
 width: auto;
  height: 200px;
  max-height: 200px;
   max-width:200px
   object-fit: contain;
}

0
2017-10-18 05:28