| Версия для печати
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум на Исходниках.RU > HTML, CSS > Замена картинок в зависимости от пропорций окна |
| Автор: JoeUser 01.10.19, 06:23 |
| Приветствую! Возник вот какой вопрос. Хочется рисовать картинки разной геометрии в зависимости от текущих пропорций окна. Пока я это реализовал средствами CSS: <{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}> @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%; } } и в разметке страницы: <{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}> <div class="first-slide"></div> Но в этом решении есть два грубых недостатка: 1) Не все браузеры это поддерживают. Например, браузер из системных приложений Xiaomi MI MAX 3 плевать хотел на "content". А заставлять мобильных пользователей юзать хром или файрфокс - не по фэншую. 2) Удваивается количество тяжелых картинок Что посоветуете? Может как-то программно можно обрезать верх-низ картинки и подставлять по событию ресайза окна? |
| Автор: Gonarh 01.10.19, 09:13 |
| формировать жабой img? |
| Автор: JoeUser 01.10.19, 12:47 |
| Скорее всего да. Добавлено Хотя погоди ... хороший вопрос!!!  Навел на мыслю ... А не порезать ли мне картинку на три? Для пропорции 6/5 я вывожу их все в столбик, а для 16/9 - верхнюю и нижнюю прячу. Как говорится "и волки целы, и утро вечера мудренее"  Запилю все на медиазапросах CSS и никакой для этого жабы! Уж "display: none" эти все маодзедуновские браузеры должны же понимать. |