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

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

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

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

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

Войти через центр авторизации
Похожие вопросы