Absolute Positionierung für Bilder ⇐ CSS

[Guest]

Problem < /strong>
Das untergeordnete Bild haftet nicht beim übergeordneten Bild, wenn ich die
-Auflösung ändere < /p>
Anforderungen < /strong> < /p>

[*] Ich brauche jedes Bild, um immer vollständig auf dem Bildschirm zu sein. Deshalb verwendet IM
enthalten anstelle von Deckungen. < /li>
Ich brauche es auch, um an der genauen Position zu bleiben und mich nicht zu bewegen, sodass
nicht mit den anderen Bildern zusammenstößt, wenn ich es später einhühne. Ich könnte
alle Bildvermögen mit einem kombinieren, aber ich möchte sie separat
ausgeben, weil ich sie bei der Bewahren /Klicken auf
them.
< /ul>
Was ich ausprobiert habe < /strong> < /p>

Ich versuche, Absolute zu verwenden Positionierung mit Prozentsätzen, weil ich
auf diese Weise reagierter hörte, aber ich habe immer noch das gleiche Problem < /li>
Ich habe versucht, fest zu verwenden, anstatt das gleiche, aber das gleiche Problem < /< /< / li>
Ich habe versucht, REM, PX und VH zu verwenden, aber ich habe immer das gleiche
Problem < /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>

kleinerer Auflösungsbildschirm

Bildschirm größerer Auflösung