Отзывчивая полноразмерная cssSlider - сохраняйте высоту до точки останова

Я хотел бы купить лицензию cssSlider на www.cssslider.com, но мне нужно заставить ее работать в первую очередь.

Мне нужен гибкий полноразмерный слайдер. По мере того, как окно браузера уменьшается по ширине, я хочу сначала сохранить высоту слайдера (так что будут разрезаны только стороны изображения слайдера). После определенной точки останова (когда окно браузера имеет ту же ширину, что и ширина оболочки содержимого на моем сайте), только тогда я хочу, чтобы ползунок также уменьшался по вертикали. Таким образом, слайдер не будет смехотворно тонким на более мелких устройствах. Надеюсь, я хорошо объясню.

Мне удалось сделать это на моем сайте с одним изображением, используемым в качестве фона, с использованием прозрачного .gif с шириной 1120 x 500: https://www.easterisland.travel/

Я знаю, что это возможно с помощью cssSlider, так как они имеют эту функцию на своем первом слайдере страницы (http://cssslider.com/), но нет возможности выбрать это с помощью исполняемый файл cssSlider.

Любые подсказки? Спасибо!

Ответ 1

В конце концов, я нашел, что это правильный код:

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

Я обнаружил, что программа cssSlider автоматически генерирует поведение, которое я искал, с правильными настройками. Все, что вам нужно сделать, это поставить точку останова, которую вы хотите, в качестве ширины изображения, с проверкой "Полная ширина".

Ответ 2

Для меньших экранов они устанавливают высоту контейнера автоматически внутри медиа-запроса. Затем они, похоже, служат для разных изображений, основанных на ширине экрана. Таким образом, это выглядит как "отзывчивые изображения".

Отзывчивые изображения могут быть сложными в зависимости от того, интересуетесь ли вы 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;
    }
}