Duyarlı tam genişlikte cssSlider - kesme noktasını

Question

aralığına kadar koruyun.

www.cssslider.com adresinden cssSlider lisansı almak istiyorum, ancak önce çalışmaya başladım.

Duyarlı bir tam genişlikte kaydırıcı istiyorum. Tarayıcı penceresi genişledikçe, önce kaydırıcı yüksekliğini sağlam tutmak istiyorum (böylece kaydırıcının görüntüsünün sadece kenarları kesilecektir). Belirli bir kesme noktasından sonra (tarayıcı penceresi, sitemdeki içerik sarmalayıcısının genişliği ile aynı genişliğe sahip olduğunda), ancak kaydırıcının da dikey olarak daha küçük olmasını istiyorum. Bu şekilde, kaydırıcı küçük cihazlarda gülünç bir şekilde ince olmaz. Umarım kendimi iyi açıklarım.

Ben 1120 x 500 genişliğinde şeffaf .gif kullanarak, arka plan olarak kullanılan tek görüntü ile sitemde bunu başardı: https://www.easterisland.travel/

Onlar bu var çünkü, cssSlider ile mümkün olduğunu biliyorum İlk sayfa üst kaydırıcısında (http://cssslider.com/) özellik bulunur, ancak bunu cssSlider yürütülebilir programıyla birlikte seçme seçeneği yoktur.

Herhangi bir ipucu? Teşekkür ederim!

Answer 1

Sonunda, bu doğru kod olduğu tespit: Ben otomatik oluşturmak için cssSlider programı buldum

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

Doğru ayarları ile aradığım davranış. Yapmanız gereken tek şey, "Tam genişlik" işaretli olarak, görüntü genişliği olarak istediğiniz kesme noktasını koymaktır.

Answer 2

Daha küçük ekranlar için, kapsayıcı yüksekliğini ortam sorgusunda otomatik olarak ayarlar. Ardından ekran genişliğine göre farklı görüntüler sunmaya başladılar. Yani 'duyarlı görüntüler' gibi görünüyor.

Duyarlı görüntüleri IE, sunucu yapılandırması umurumda olmadığına bağlı komplike ve php veya javascript, vs vs biliyorum olmadığını İşte bazı bilgileri edilebilir: https://css-tricks.com/which-responsive-images-solution-should-you-use/

Alternatif çözüm: yeni CSS3 kullanabilirsiniz vw ve vh birimleri.
vw ve vh, görünümün yüzdesidir. Bunun için tarayıcı desteği kabaca css3 sürgüleri desteğine eşit olacak, bu yüzden iyi olmalısınız! Onların Medya sorgusunun yerine

deneyin, böyle bir şey:

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