Как правильно сверстать такой блок?

#html #css

Как правильно сверстать блок со скрина, чтобы:


Круг выше блока ровно на 50% своей высоты.
Круг в виде div, которому задано изображение в виде background-image.



    

Ответы

Ответ 1

Адаптивно правильный вариант такой:



.item {
  background: lightgrey;
  width: 30%;
  margin-top: 20%; /* это не рабочее число */
  padding: 10px;
}

.item .thumb {
  width: 100%;
  background: purple;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin-top: calc(-50% - 10px);
  margin-bottom: 10px; /* возвращаем padding блока */
}

.item .thumb:before { /* делаем резиновый квадрат */
  content: '';
  display: block;
  padding-top: 100%;
}

  

  Как правильно сверстать блок со скрина, чтобы: Круг выше блока ровно на 50% своей
высоты. Круг в виде div, которому задано изображение в виде background-image.





Единственное, вылетает картинка выше контейнера всего блока, поэтому отступ надо
делать отдельно в зависимости от разметки