Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[3.128.199.130] |
|
Сообщ.
#1
,
|
|
|
Приветствую!
Возник вот какой вопрос. Хочется рисовать картинки разной геометрии в зависимости от текущих пропорций окна. Пока я это реализовал средствами 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) Удваивается количество тяжелых картинок Что посоветуете? Может как-то программно можно обрезать верх-низ картинки и подставлять по событию ресайза окна? |
Сообщ.
#2
,
|
|
|
формировать жабой img?
|
Сообщ.
#3
,
|
|
|
Цитата Gonarh @ формировать жабой img? Скорее всего да. Добавлено Хотя погоди ... хороший вопрос!!! Навел на мыслю ... А не порезать ли мне картинку на три? Для пропорции 6/5 я вывожу их все в столбик, а для 16/9 - верхнюю и нижнюю прячу. Как говорится "и волки целы, и утро вечера мудренее" Запилю все на медиазапросах CSS и никакой для этого жабы! Уж "display: none" эти все маодзедуновские браузеры должны же понимать. |