Как сделать псевдоэлемент адаптивным?

Question

[NotNight]

Каким образом можно реализовать адаптив псевдоэлемента?
Чтоб он одновременно сжимался вместе с блоком и не вылезал за пределы его?
Сейчас при сжатии экрана, он начинает выскакивать за пределы блока

<div class="who-we-are__image">
    <img class="image__who-we-are" src="img/pexels-photo-406014 3.jpg" alt="">
</div>

.who-we-are__image {
    position: relative;
    text-align: center;
    margin-top: -29%;
    padding: 0 30px;
}
.who-we-are__image::before {
    position: absolute;
    top: -33%;
    left: 0px;
    content: '';
    background: url('../img/Blob\ 2.png') 0 0 / 100% no-repeat;
    width: 656px;
    height: 471px;
}
.image__who-we-are {
    width: 100%;
    max-width: 846px;
    border-radius: 40px;
    position: relative;
}

Answer 1

[wadowad]

Переведите обсалютные размеры в относительные:
width: 656px; => width: 100%;
height: 471px; => padding-top: 72%;

Comments

[NotNight]

Нет, не подошло, но спасибо)

[ProjectSoft]

NotNight, как это не подошло?
У вас картинка максимального размера 846px.
Размер псевдоэлемента 656px.
Соответственно максимальный размер псевдо элемента в процентах будет 77.54%
Про высоту вам даже очень хорошо объяснили и тоже процентное соотношение можно подобрать.
И с позицией тоже самое.

Отмечайте ка решением совет wadowad

[Ankhena]

NotNight, чем подошло? Не в угадайку же играть.
Не подходит 100%, поменяйте на нужное значение и/или укажите max-width.