Как правильно сверстать блок со скрина, чтобы:
- Круг выше блока ровно на 50% своей высоты.
- Круг в виде div, которому задано изображение в виде background-image.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак правильно сверстать блок со скрина, чтобы:
Адаптивно правильный вариант такой:
.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%;
}
<div class="item">
<div class="thumb" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Double_Peaked_Ararat.jpg/400px-Double_Peaked_Ararat.jpg)"></div>
Как правильно сверстать блок со скрина, чтобы: Круг выше блока ровно на 50% своей высоты. Круг в виде div, которому задано изображение в виде background-image.
</div>
Единственное, вылетает картинка выше контейнера всего блока, поэтому отступ надо делать отдельно в зависимости от разметки