Как грамотно сверстать данный блок?

Question

[Михаил Р.]

Всем привет!
Сверстал блок, но возникли трудности с позиционированием изображения:


Изображение должно быть всегда по центру и на 50% своей высоты выше основного контейнера блока. Позиционирование изображения щас жестко прописано, и постоянно съезжает, когда размер изображения становится иным.

И если возможно, может кто-то покажет, как он-бы сверстал данный блок, возможно что-то интересное узнаю!
Спасибо!

Answer 1

[Сергей delphinpro]

че тут думать-то

.image {
  width:100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.image > img {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

PS
ТОСТЕР, ПРИКРУТИ «EMMET» К РЕДАКТОРУ!!!
И сделай в нем monospace шрифт

Comments

[Сергей Горячев]

ТОСТЕР, ПРИКРУТИ «EMMET» К РЕДАКТОРУ!!!

Мечты, мечты)))