Как правильно сверстать блок со скрина, чтобы:
Круг выше блока ровно на 50% своей высоты.
Круг в виде div, которому задано изображение в виде background-image.
Ответ
Адаптивно правильный вариант такой:
.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.
Единственное, вылетает картинка выше контейнера всего блока, поэтому отступ надо делать отдельно в зависимости от разметки
Комментариев нет:
Отправить комментарий