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

[Anonymous]

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

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

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





Test











.grandma {
position: absolute;
right: 17%;
top: 45.5%;
background-image: url('./grandma.png');
background-repeat: no-repeat;
background-size: contain;
height: 31%;
width: 31%;
}
.shop {
background-image: url('./shop.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;
}
html, body {
height: 100vh;
min-width: 100%;
padding: 0;
margin: 0;
background-color: #36667c;
}


< /code>

меньше экрана разрешения

Ecrection большее разрешение


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