Il plugin Flexslider è perfettamente responsive ma ha un difetto: le immagini delle slide non scalano in modo proporzionale quando viene ridimensionata la finestra del browser. Vediamo come ovviare a questo problema.
Trasformeremo le immagini presenti nel DOM in immagini di sfondo delle slide ed useremo la proprietà CSS background-size per il ridimensionamento proporzionale.
Per prima cosa definiamo questi stili nel nostro file CSS:
.flexslider .slides li {
background-size: cover;
background-repeat: no-repeat;
}
Quindi operiamo sulle slide con jQuery:
$( "li", ".slides" ).each(function() {
var $slide = $( this ),
$img = $slide.find( "img" ),
src = $img.attr( "src" );
$slide.css( "backgroundImage", "url(" + src + ")" );
$img.remove();
});
Le immagini originali non sono più necessarie quindi possono essere rimosse.