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

Question

[Flexx 97]

Решил потренироваться в верстке но не знаю как решить проблемы с наложением носа лисы на текст, в проекте отдельным файлом лежит этот самый нос, не могли вы мне подсказать какую-нибудь статью по этой теме, сам я не нашел ответа(и да я открывал больше 3 страниц в гугле). Спасибо.

Answer 1

[Антон Усачев]

Первым слоем картинка (слой с относительным позиционированием). Вторым слоем текст. Третий самый высокий слой – абсолютное позиционирование с картинкой носа. Но есть хитрость: размер холста с носом должен быть на прозрачном фоне размером с картинку с лисой, чтобы при любом размере экрана поведение картинок было идентичным:

Comments

[Ankhena]

Еще, видимо, размер текста в vw

[Антон Усачев]

Ankhena, ну это уже зависит от ТЗ. Я так понял, что нос там слегка прозрачный, так что выход текста из по носа визуально будет заметен только при определенной ширине экрана. И еще я подозреваю, что текст там тоже идет картинкой, так что – если так – к слою с текстом применима та же техника, что и с носом.

[Ankhena]

Антон Усачев, если текст картинкой, то три слоя точно не нужны, тогда это просто одна картинка ;)

Если текст текстом и всё это адаптивно должно себя вести, то текст тоже должен масштабироваться.
Возможно, еще и пропорции блока надо контролировать. Но мы ш опять телепаты ))))

Answer 2

[MamaLuyba]

два варианта:
1) вырезаешь всю лису и накладываешь ее поверх текста
2) делаешь лису и текст одной картинкой

Answer 3

[dom1n1k]

Исходя из тех данных, что я вижу, напрашивается вариант просто сделать лису и подпись одной картинкой.
Ну серьезно, зачем их разделять? Вы потом захотите рядом с лисой написать elephant? Двигать лису относительно текста тоже вроде бессмысленно при такой графике.
В теории, конечно, можно придумать какую-то хитрую адаптивность, но тогда сначала нужно четко сформулировать что нужно получить, а уж потом думать как.