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

Question

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

我想要一个响应式全宽滑块。随着浏览器 window 宽度的减小，我想首先保持滑块高度不变（因此只会剪切滑块图像的边）。在某个断点之后（当浏览器 window 的宽度与我网站上内容包装器的宽度相同时），只有到那时我才希望滑块也垂直变小。这样，滑块就不会在较小的设备上变薄得离谱。希望我解释清楚。

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

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

有线索吗？谢谢！

Answer 1

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

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

替代解决方案：您可以使用较新的 css3 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 程序可以通过正确的设置自动生成我正在寻找的行为。您需要做的就是将您想要的断点设置为图像宽度，并选中"Full width"。

Responsive full-width cssSlider - keep height until breakpoint