На главную
ПРАВИЛА FAQ Помощь Участники Календарь Избранное RSS
msm.ru
Модераторы: Vasya2000, Serafim, fatalist
  
> Замена картинок в зависимости от пропорций окна
    Приветствую!

    Возник вот какой вопрос. Хочется рисовать картинки разной геометрии в зависимости от текущих пропорций окна.
    Пока я это реализовал средствами CSS:

    ExpandedWrap disabled
      @media (max-aspect-ratio: 16/9) {
        .first-slide {
          content: url(http://mysite.tld/img/slide-1.png);
          background-color: gray;
          width: 100%;
        }
      }
       
      @media (min-aspect-ratio: 16/9) {
        .first-slide {
          content: url(http://mysite.tld/img/slide-1-w.png);
          background-color: gray;
          width: 100%;
        }
      }


    и в разметке страницы:

    ExpandedWrap disabled
      <div class="first-slide"></div>


    Но в этом решении есть два грубых недостатка:

    1) Не все браузеры это поддерживают. Например, браузер из системных приложений Xiaomi MI MAX 3 плевать хотел на "content". А заставлять мобильных пользователей юзать хром или файрфокс - не по фэншую.
    2) Удваивается количество тяжелых картинок

    Что посоветуете? Может как-то программно можно обрезать верх-низ картинки и подставлять по событию ресайза окна?
    Мои программные ништякиhttp://majestio.info
      формировать жабой img?
        Цитата Gonarh @
        формировать жабой img?

        Скорее всего да.

        Добавлено
        Хотя погоди ... хороший вопрос!!! :good:
        Навел на мыслю ... А не порезать ли мне картинку на три? Для пропорции 6/5 я вывожу их все в столбик, а для 16/9 - верхнюю и нижнюю прячу. Как говорится "и волки целы, и утро вечера мудренее" :lol: Запилю все на медиазапросах CSS и никакой для этого жабы! Уж "display: none" эти все маодзедуновские браузеры должны же понимать.
        Мои программные ништякиhttp://majestio.info
        1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
        0 пользователей:


        Рейтинг@Mail.ru
        [ Script Execution time: 0,0725 ]   [ 14 queries used ]   [ Generated: 5.12.19, 14:19 GMT ]