4

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

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

введите сюда описание изображения

3
  • 1
    «Правильно» зависит от конкретных требований к вёрстке. Можно хоть тупо PNG-картинкой это сделать, вдруг это тоже считается «правильно»)
    – andreymal
    3 авг 2018 в 12:46
  • 1
    Еще не понятно фиксированная ли ширина блок и круга, тут это очень важно 3 авг 2018 в 12:53
  • @ArtemGorlachev нет, ширина изначально не известна... 3 авг 2018 в 13:07

1 ответ 1

4

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

.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>

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

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.