Абсолютное позиционирование для изображений ⇐ Html

[Anonymous]

Проблема < /strong>
изображение ребенка не придерживается родительского изображения, когда я изменяю разрешение
< /p>
Требования < /strong> < /p>

[*] Мне нужно, чтобы каждое изображение всегда было полностью на экране, поэтому я
использует содержание вместо обложки. < /li>
Мне также нужно, чтобы он оставался в точной позиции, а не двигаться, поэтому он
не сталкивается с другими изображениями, когда я добавляю его позже. Я мог бы
объединить все активы изображения с одним, но я хочу разместить их отдельно
, потому что они мне нужны, чтобы иметь разные эффекты, когда я нажимаю /нажимаю на
them.
< /ul>
то, что я пробовал < /strong> < /p>

Я пытаюсь использовать абсолют позиционирование с процентами, потому что я
слышал, что это более отзывчиво, но у меня все еще есть такая же проблема < /li>
Я пытался использовать фиксированную вместо абсолютной, но та же проблема < / li>
Я пытался использовать REM, PX и VH, но я всегда получаю ту же проблему
< /li>
< /ul>

Код: Выделить всё

.grandma {
position: absolute;
right: 17%;
top: 45.5%;
background-image: url('https://i.sstatic.net/HiEBQROy.png');
background-repeat: no-repeat;
background-size: contain;
height: 31%;
width: 31%;
}

.shop {
background-image: url('https://i.sstatic.net/jyfwcxEF.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 100%;
height: 100%;
}

.container-2 {
position: relative;
height: 90%;
width: 95%;
margin-bottom: 2rem;
}

.container-1 {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/794 ... for-images