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

Question

[Maxymus1996]

Здравствуйте! Нужно поместить одно изображение на другое, чтобы был эффект рамки. это изображение должно быть фоном, и в черную область нужно поместить другое фото, и чтобы все это было адаптивным. как можно такое сделать?

Comments

[Ankhena]

Нижний блок повернут.
Верхний с белой рамкой.
Все это абсолютно позиционировано.

Либо нижний это родитель. Тогда трансформ в одну сторону, дочернему в обратную.

[Ankhena]

Поменьше блоков-оберток: https://jsfiddle.net/1yvea616/

Answer 1

[Сергей Свиридонов]

Берете блок, помещаете в него изображение (который фон) затем в тот же блок еще одно изображение (которое - картина). Задаете блоку position: relative; А картине (в рамке что должна быть) position: absolute; (изображениям max-width: 100%;

>>PROFIT. (я так думаю :))
А вообще, то что вы изобразили, можно было и через css сделать)
https://codepen.io/anon/pen/WdpKoG?editors=1100

Это?

Comments

[Maxymus1996]

можете помочь сделать через css?

[Сергей Свиридонов]

Ну вы объясните что за рамка

[Maxymus1996]

Сергей Свиридонов, белые отступы по бокам, и сзади синяя тень повернутая, думал может через box-shadow сделать, но не знаю как повернуть

[Сергей Свиридонов]

https://codepen.io/anon/pen/WdpKoG?editors=1100

Это?

[Сергей Свиридонов]

Правильно сделано?

[Maxymus1996]

Сергей Свиридонов, да, спасибо большое!

Answer 2

[Dima Polos]

Обе картинки сделать позишеном друг на друга, поиграться z-index. Заднюю картинку повернуть transform: rotate(45deg); или на другой градус. Верхней картинке задать ширину, высоту, border: 20px solid #fff; border-radius: 10px; все числа беру с потолка, надо подгонять, и далее этому div, который рамка background-color: transparent.
По идее все.