Картинка в картинке по центру, как?

Question

[freeman0204]

Есть код: codepen.io/anon/pen/EjBpMv

Нужно вставить картинку в картинку по центру. На глаз я выставил оп центру. Но как я понимаю если я позиционирую меньшую картинку в большей как position: relative; и position: relative; то отсчет должен идти с большей картинки а не с документа. И для того что бы выставить по центу достаточно будет top: 50%; left: 50%;. Мне не понятно от какого объекта идет отсчет? И можно ли как то без div решить такую задачу?

Answer 1

[Михаил]

codepen.io/anon/pen/PqrdGY

Comments

[freeman0204]

Без div здесь не обойтись? Просто img.

Answer 2

[Dexmaster]

Если тебе все-равно на положение объектов можешь сделать

background-position: center center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

codepen.io/Dexmaster/pen/EjBegQ

P.S. Псевдоэлементы :after и :before не могут быть заданы изменяемым элементам.(replaced element)

К их числу относят элементы обьектов:
 <img>, <object>, <video>, <audio> и <canvas>
и элементы формы:
 <button>, <textarea>, <input> и <select>.

Comments

[freeman0204]

Без div здесь не обойтись? Просто img.

[Dexmaster]

Артур Черешнюк: На самом деле :after и :before не могут быть заданы изменяемым елементам (replaced element) "таким которые изменяются в зависимости от внешнего фактора, т.е. догружаются" пр.

<img>, <object>, <video>,<audio>, <canvas> 
и элементы формы: <button>, <textarea>, <input>, and <select>

Answer 3

[Aleksandr]

Видно что на глаз вышло)
Отсчет идет с большой картинки