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

Question

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

我想要一个响应全宽滑块。随着浏览器窗口宽度的减小，我想首先保持滑块高度不变（因此只会切割滑块图像的两侧）。在某个断点之后（当浏览器窗口的宽度与我站点上的内容包装器的宽度相同时），只有这样我才能让滑块垂直变小。这样，滑块在较小的设备上不会变得非常薄。我希望我能很好地解释自己。

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

我知道cssSlider可以使用它，因为它们在第一页顶部滑块（http://cssslider.com/）上有这个功能，但没有选择使用cssSlider可执行程序选择它。

任何线索？谢谢！

Answer 1

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

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

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

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

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

Answer 2

最后，我发现这是正确的代码：

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

我发现cssSlider程序使用正确的设置自动生成我正在寻找的行为。您需要做的就是将所需的断点作为图像宽度，并选中“全宽”。