Привязка респонсив элемента к фону

Question

Пытаюсь привязать половину респонсив изображения к респонсив фону контейнера. Пришлось создать отдельный контейнер для фона и через position: absolute привязать изображение. Изначально планировалось не создавать отдельный контейнер с width: 70%, а использовать background-size: 70% для фона и margin-top для изображения. Но при масштабировании, из-за размеров в %, все слетало. Какие есть еще варианты реализовать подобное?

Песочница: https://jsfiddle.net/aowvs4cy/2/

.c {
  background: 50% 0/100% no-repeat linear-gradient(#e66465, #9198e5);
  width: 70%;
  padding-bottom: 20%;
  margin: 0 auto 65px;
  position: relative;
}

.user {
  position: absolute;
  bottom: -35%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  padding-bottom: 20%;
  border: 1px solid;
  border-radius: 100%;
  overflow: hidden;
}

.user-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="c">
  <div class="user">
    <img src="https://via.placeholder.com/100x150" alt="" class="user-img">
  </div>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe illo quam magni, veniam facilis, odio, neque quidem esse ab accusantium aperiam iure quasi error laborum incidunt voluptates qui vero quas perspiciatis. Beatae quidem modi qui nostrum neque
  itaque laborum odit, tempora! Necessitatibus illo tempora quod odit, sint itaque quo atque.
</p>

БЛОГ НА HUSL

Привязка респонсив элемента к фону

Ответы (0 шт):