Как адаптивно одно изображение наложить на другое?

Question

[Роман Томми]

Всем доброго времени суток.

Занимаюсь изучением верстки, и в просторах интернета нашел несложный проект, которым в данный момент занимаюсь. В данном проекте, это макет лендинга, есть такой момент - отдельная картинка 3-х телефонов, и 3 отдельные картинки, которые ложатся на место дисплеев этих телефонов. Вот картинка как это должно выглядеть

А вот изображения исходников:





Вопрос в следующем - как адаптивно, то есть при разных разрешениях экрана, накладывать изображения
дисплеев на изображение с телефонами?

С данной задачей ранее не сталкивался и буду очень благодарен помощи в реализации данной проблемы.
Заранее огромное спасибо.

Comments

[VegasChickiChicki]

Попросить дизайнера их склеить и не мучатся... Это же реально выглядит как бред...

[Роман Томми]

VegasChickiChicki, я с Вами полностью согласен. Но макет найден в интернете в ознакомительных целях, и нет возможности связаться с дизайнером. Мне даже стало интересно, если в будущем появится такая задача, есть ли возможность ее как то решить
Спасибо за участие ))

[Rustam Bainazarov]

Position: absolute + одинаковые соотношения сторон + относительные единицы.

[Ankhena]

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

[Роман Томми]

Ankhena, Этим я и занялся.
Дизайнера никто и не трогает.

Answer 1

[Egor]

position: relative телефонам, а картинкам position: absolute. И двигайте их с помощью left/top