Responsive full-width cssSlider - mantenere l'altezza fino al punto di interruzione

Question

Mi piacerebbe acquistare una licenza di cssSlider su www.cssslider.com, ma ho bisogno di farlo funzionare prima.

Desidero un cursore a tutta larghezza reattivo. Man mano che la finestra del browser diminuisce di larghezza, voglio mantenere l'altezza del cursore inizialmente intatta (quindi verranno tagliati solo i lati dell'immagine del cursore). Dopo un certo punto di interruzione (quando la finestra del browser ha la stessa larghezza della larghezza del wrapper del contenuto sul mio sito), solo allora voglio che il dispositivo di scorrimento diventi più piccolo verticalmente. In questo modo, il dispositivo di scorrimento non diventerà ridicolmente magro su dispositivi più piccoli. Spero di spiegarmi bene.

sono riuscito a fare questo sul mio sito con una sola immagine utilizzata come sfondo, con un .gif trasparente con una larghezza di 1120 x 500: https://www.easterisland.travel/

So che è possibile con cssSlider, dato che hanno questo funzione sul cursore superiore della prima pagina (http://cssslider.com/), ma non è possibile scegliere questo con il programma eseguibile cssSlider.

Eventuali indizi? Grazie!

Answer 1

Alla fine, ho scoperto che questo è il codice corretto:

@media only screen and (max-width: 1500px) { 
    .csslider1, 
    .csslider1 > ul { 
     height: auto; 
    } 
} 

ho trovato il programma cssSlider per generare automaticamente il comportamento che stavo cercando con le giuste impostazioni. Tutto quello che devi fare è mettere il breakpoint che vuoi come larghezza dell'immagine, con "Full width" controllato.

Answer 2

Per schermi più piccoli, impostano l'altezza del contenitore in automatico all'interno di una query multimediale. Quindi sembrano servire diverse immagini in base alla larghezza dello schermo. Quindi sembra "immagini reattive".

immagini Responsive può essere complicato a seconda se vi preoccupate per IE, la configurazione del server, e se si conosce PHP o javascript, ecc ecc Ecco alcune informazioni: https://css-tricks.com/which-responsive-images-solution-should-you-use/

Soluzione alternativa: è possibile utilizzare il css3 più recente unità di vw e vh.
vw e vh sono percentuali della finestra. Il supporto del browser per questo sarà all'incirca uguale al supporto per i cursori css3, quindi dovresti essere ok!

provare a sostituire la loro media query, qualcosa di simile:

@media only screen and (max-width: 800px) { 
    .csslider1, .csslider1 > ul { 
     height: 75vh; max-height:450px; 
    } 
}