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

前端之家收集整理的这篇文章主要介绍了响应全宽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;
    }
}

猜你在找的CSS相关文章