Слайдер фоновых изображений и мобильные устройства

Тема в разделе "Верстка", создана пользователем masterlan, 17 сен 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. masterlan

    masterlan

    Регистр.:
    14 окт 2009
    Сообщения:
    569
    Симпатии:
    52
    Привет народ.
    Вообщем дело вот в чем - в шаблоне работает слайдер фоновых изображений bgstretcher .
    На главной странице слайдятся несколько изображений, на второстепенных по одному изображению.
    Выглядит так - фоновое изображение фиксированных размеров (h:1600 ; w: 964)
    На нем вся страница. Фоновое на месте, страниа скроллится.
    На больших экранах выглядит норма.
    А вот на мобильных - фигня. (второе вложение)
    def-index.png def-index-mob.png
    В header прописан bgstretcher так:

    В css он описан так:


    Получается, что исходное изображение очень большое, и широкое. А на телефоне оно отображается не пропорционально из-за разрешения экрана.

    Как привести вид сайта на моб девайсах в норму?
    Думал на счет @media , по размеру экрана подгружать нужного размера бэкграунд - в css, но не могу придумать как описать для слайдера.

    Может заменить слайдер, на какой?
    Кто что посоветует?
     
  2. dreadw1nd

    dreadw1nd Создатель

    Регистр.:
    16 мар 2015
    Сообщения:
    33
    Симпатии:
    6
    Если заменять, можно попробовать на Royal Slider, использовал в нескольких проектах, показал себя весьма неплохо.
    Заменить слайдер 1 статичной картинкой? :)
    Прописать размер картинки через @media (хотя в теории не отработает)
    Изменяем, хотя дивный костыль тогда выходит... В общем,
    Код:
    .bgstretcher img {
    height: 80% !important;
    }
    Хотя может и меньше 80%, нужно смотреть...
     
  3. masterlan

    masterlan

    Регистр.:
    14 окт 2009
    Сообщения:
    569
    Симпатии:
    52
    Я так себе понимаю - в моем случае, должно быть каждое изображение из слайдера в нескольких вариантах по разрешению, и слайдер должен в зависимости от экрана их показывать на странице... Теория...
    Заменить слайдер одной страницей можно, но заказчик не одобрит.
    @media не будет работать для слайдера?
    80% это вы для чего имели ввиду?

    Этот слайдер вообще все ломает. Но заказчику нравится.

    Правильно ли я понял что для страниц на которых статическое изображение, можно указывать свойство

    ?
     
  4. dreadw1nd

    dreadw1nd Создатель

    Регистр.:
    16 мар 2015
    Сообщения:
    33
    Симпатии:
    6
    Не совсем, как я понимаю, класс .bgstretcher img отвечает за размер изображения, который используется вами в слайдере, соответственно изменяя этот размер, мы должны в теории получить другую высоту картинки.

    Но у вас проблема в другом, полистав немного документацию, видно что у вас не корректно отрабатывает часть скрипта, которая отвечает за resize.
    В вашем же случае, картинка сжимается не пропорционально, проверьте, есть ли ошибки в консоли разработчика.
     
Статус темы:
Закрыта.