Slider: Regola CSS per impostare l’altezza al caricamento

Quando si sviluppa uno slider (ad esempio flex-slider) con una larghezza variabile può capitare che durante il caricamento vediamo il contenuto subito sotto allo slider nella posizione che dovrebbe occupare quest’ultimo. Succede perché la prima immagine non è stata ancora caricata e quindi non ne si conosce l’altezza.

Per ovviare questo problema possiamo ricorrere ad un piccolo trucco che calcola tramite una proporzione il padding in percentuale da utilizzare come segnaposto in attesa che venga caricata la foto.

In poche parole assegnamo un’altezza in percentuale al contenitore dell’immagine che verrà caricata.

Ad esempio utilizzando flex-slider abbiamo questo HTML:

<div class="flexslider">
<ul class="slides">
<li><img src="slide1.jpg" alt="" /></li>
<li><img src="slide2.jpg" alt="" /></li>
<li><img src="slide3.jpg" alt="" /></li>
</ul>
</div>

Mentre il CSS che bisogna aggiungere è:

.flexslider{
/*
Padding Bottom = (Image Height / Image Width) * 100%
800 / 2000 * 100
*/
height: 0;
padding-bottom: 40%;
}

Ovviamente a seconda delle dimensioni della foto cambia la percentuale in base al calcolo scritto sopra nel commento.

Ho utilizzato questo snippet in diversi siti e principalmente per sistemare il problema in slider a larghezza piena. Questo però non esclude che si possa utilizzare per banner con immagini in background o per altre necessità legate ad esempio ad immagini caricate in lazy load.

Spero di essere stato chiaro e che possa servire a qualcuno!

Posted in CSS.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.