css - 响应式全宽 cssSlider - 保持高度直到断点

Question

我想在 www.cssslider.com 购买 cssSlider 的许可证，但我需要先让它运行。

我想要一个响应式全宽 slider 。随着浏览器窗口宽度的减小，我想首先保持 slider 高度不变(因此只会剪切 slider 图像的两侧)。在某个断点之后(当浏览器窗口的宽度与我网站上内容包装器的宽度相同时)，只有到那时我才希望 slider 也垂直变小。这样， slider 就不会在较小的设备上变薄得离谱。我希望我能很好地解释自己。

我设法在我的网站上使用一张用作背景的图像，使用宽度为 1120 x 500 的透明 .gif 来做到这一点: https://www.easterisland.travel/

我知道使用 cssSlider 是可行的，因为他们在第一页顶部 slider (http://cssslider.com/) 上有这个功能，但是没有选择 cssSlider 可执行程序的选项。

有什么线索吗？谢谢!

Answer 1

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

响应式图像可能会很复杂，具体取决于您是否关心 IE、您的服务器配置以及您是否了解 php 或 javascript 等。这里有一些信息:https://css-tricks.com/which-responsive-images-solution-should-you-use/

替代解决方案:您可以使用 vw 和 vh 的较新 css3 单元。
vw 和 vh 是视口(viewport)的百分比。浏览器对此的支持将大致等于对 css3 slider 的支持，所以你应该没问题!

尝试替换他们的媒体查询，像这样:

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