响应全宽cssSlider – 保持高度直到断点

我想在www.cssslider.com上购买cssSlider的许可证,但是我需要先让它工作.

我想要一个响应全角的滑块.当浏览器窗口的宽度减小时,我想首先保持滑块的高度完整(因此,只有滑块图像的两侧将被剪切).经过一定的断点(当浏览器窗口的宽度与我网站上的内容包装器的宽度相同)时,只有这样,我希望滑块越来越小.这样一来,滑块在较小的装置上就不会变得太细了.我希望我能很好地解释自己.

我设法在我的网站上使用单个图像作为背景,使用宽度为1120 x 500的透明.gif：
https://www.easterisland.travel/

我知道这是可能的cssSlider,因为他们的第一页顶部滑块(http://cssslider.com/)上有这个功能,但没有选择与cssSlider可执行程序.

任何线索？谢谢！

解决方法

对于较小的屏幕,它们将容器高度设置为媒体查询中的自动.然后,它们似乎根据屏幕宽度提供不同的图像.所以看起来像“响应图像”.

依赖于您是否关心IE,您的服务器配置以及您是否知道PHP或javascript等等,响应性图像可能会变得复杂.以下是一些信息：https://css-tricks.com/which-responsive-images-solution-should-you-use/

替代解决方案：您可以使用vw和vh的较新的css3单元.
vw和vh是视口的百分比.浏览器的支持大致相当于对css3滑块的支持,所以你应该可以！

尝试替换他们的媒体查询,如下所示：

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