Flexx97
@Flexx97
начинающий front-end разработчик

Как сделать адптивную картинку?

5d41407adedcc280898022.png
Решил потренироваться в верстке но не знаю как решить проблемы с наложением носа лисы на текст, в проекте отдельным файлом лежит этот самый нос, не могли вы мне подсказать какую-нибудь статью по этой теме, сам я не нашел ответа(и да я открывал больше 3 страниц в гугле). Спасибо.
  • Вопрос задан
  • 170 просмотров
Пригласить эксперта
Ответы на вопрос 3
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Первым слоем картинка (слой с относительным позиционированием). Вторым слоем текст. Третий самый высокий слой – абсолютное позиционирование с картинкой носа. Но есть хитрость: размер холста с носом должен быть на прозрачном фоне размером с картинку с лисой, чтобы при любом размере экрана поведение картинок было идентичным:

5d414e324b588579472504.png
Ответ написан
@MamaLuyba
два варианта:
1) вырезаешь всю лису и накладываешь ее поверх текста
2) делаешь лису и текст одной картинкой
Ответ написан
dom1n1k
@dom1n1k
Исходя из тех данных, что я вижу, напрашивается вариант просто сделать лису и подпись одной картинкой.
Ну серьезно, зачем их разделять? Вы потом захотите рядом с лисой написать elephant? Двигать лису относительно текста тоже вроде бессмысленно при такой графике.
В теории, конечно, можно придумать какую-то хитрую адаптивность, но тогда сначала нужно четко сформулировать что нужно получить, а уж потом думать как.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
Bloomio Москва
от 170 000 до 250 000 руб.
Eagle Dynamics Москва
от 150 000 до 200 000 руб.
24 авг. 2019, в 11:59
5000 руб./за проект
24 авг. 2019, в 11:31
30000 руб./за проект
24 авг. 2019, в 10:59
750 руб./за проект