Форум на Исходниках.RU https://forum.sources.ru Форум на Исходниках.RU Форум на Исходниках.RU https://forum.sources.ru/index.php?showtopic=415895&view=findpost&p=3811530 Tue, 01 Oct 2019 12:47:25 +0000 Замена картинок в зависимости от пропорций окна https://forum.sources.ru/index.php?showtopic=415895&view=findpost&p=3811530 Цитата Gonarh @
формировать жабой img?

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

Добавлено
Хотя погоди ... хороший вопрос!!! :good:
Навел на мыслю ... А не порезать ли мне картинку на три? Для пропорции 6/5 я вывожу их все в столбик, а для 16/9 - верхнюю и нижнюю прячу. Как говорится "и волки целы, и утро вечера мудренее" :lol: Запилю все на медиазапросах CSS и никакой для этого жабы! Уж "display: none" эти все маодзедуновские браузеры должны же понимать.]]> JoeUser HTML, CSS https://forum.sources.ru/index.php?showtopic=415895&view=findpost&p=3811514 Tue, 01 Oct 2019 09:13:12 +0000 Замена картинок в зависимости от пропорций окна https://forum.sources.ru/index.php?showtopic=415895&view=findpost&p=3811514 Gonarh HTML, CSS https://forum.sources.ru/index.php?showtopic=415895&view=findpost&p=3811503 Tue, 01 Oct 2019 06:23:35 +0000 Замена картинок в зависимости от пропорций окна https://forum.sources.ru/index.php?showtopic=415895&view=findpost&p=3811503
Возник вот какой вопрос. Хочется рисовать картинки разной геометрии в зависимости от текущих пропорций окна.
Пока я это реализовал средствами CSS:

    @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%;
      }
    }


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

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


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

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

Что посоветуете? Может как-то программно можно обрезать верх-низ картинки и подставлять по событию ресайза окна?]]> JoeUser HTML, CSS