Как правильно позиционировать 2 картинки в div элементе?

Question

[Demigodd]

Покажите на примере, самые лучшие варианты как позиционировать 2 картинки вот так.


Вот набросок на Jsfiddle

Как вообще их позиционировать что бы при зуме и при разных масштабах экранов, они с места не сходили.
С помощью FlexBox или есть вариант по лучше ?

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/5pL0sukt/24/
https://jsfiddle.net/5pL0sukt/25/

Answer 2

[ProjectSoft]

Ещё пять копеек
https://jsfiddle.net/a4o0sf6y/

Answer 3

[Андрей Пушкин]

position - relative и absolut

Comments

[Demigodd]

Да но это не идеальный вариант, при прокуртке картинки смешаются в левый верхний угол, а нужно что бы они были как одно целое в центре.
https://jsfiddle.net/5pL0sukt/11/

[Александр Таратин]

они были как одно целое в центре.

В svg прямоугольники нарисуйте, а картинки фоном через css поставьте.

Answer 4

[Петр]

https://jsfiddle.net/yvog6ztk/7/

Comments

[Demigodd]

А есть способ по лучше ? Не обязательно через position. Может быть через FlexBox или что тот еще.
К примеру если в вашем способе изменить, размер изображения то
https://jsfiddle.net/dgv7bcy0/
позиция тоже измениться.