Страницы

Поиск по вопросам

пятница, 15 февраля 2019 г.

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

Как правильно сверстать блок со скрина, чтобы:
Круг выше блока ровно на 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.

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

Комментариев нет:

Отправить комментарий