CSS preserve ratio of circle on top of image - css

Question

I have an image and i want to put 2 circles on top of it, instead of the eyes.
body {
background-color: lightgrey;
color: #fff;
padding: 0;
margin: 0;
}
main {
display: grid;
place-items: center;
position: relative;
}
#container {
min-height: 100vw;
min-width: 100vw;
background: none;
aspect-ratio: 1 / 1;
}
.eye-container {
position: relative;
border-radius: 50%;
background-color: red;
width: 12vw;
height: 12vw;
}
.eye-container.left {
top: -84%;
left: 36%;
}
.eye-container.right {
top: -96%;
left: 51%;
}
.eye {
position: absolute;
bottom: 3px;
right: 2px;
display: block;
width: 3vw;
height: 3vw;
border-radius: 50%;
background-color: #000;
}
img {
max-width: 100%;
min-width: 100%;
}
<main>
<div id="container">
<img id="sponge" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/SpongeBob_SquarePants_character.svg/220px-SpongeBob_SquarePants_character.svg.png">
<div class="eye-container left">
<div class="eye"></div>
</div>
<div class="eye-container right">
<div class="eye"></div>
</div>
</div>
</main>
The current issue is the image is too big, it is stretched.
The initial problem was that the layout was not responsive on mobile, and i've did some changes and now the image is this big.
I've used aspect-ratio: 1 / 1; because top was not working with negative percentage, and with pixels the eyes location is changing if is shrink the window.
Do you have another suggestion, maybe a simplified code will be better.
Thank you.

Answer 1

I'm a noob developer and I felt like, this was a tiny engineering job "LOL" but I did it for you.
So the most important point in this is to keep the image and the eyes in the same position. and to do that, you should position them in a parent container for image and eyes considering four important factors:
1- Parent position: relative; All children position: absolute;
2- All children's width: %; so it can stay in the same spot in its parent whatever the width of the parent is.
3- Eyes and eyeballs positioning top, left, right must be % too for the same purpose.
4- To change the image size, use the parent width. do not change the image size.
If you follow these steps, you can position any element with any image or other element.
* {
border: 1px solid blue;
margin: 0;
padding: 0;
}
.container {
width: 200px; /* use this to change the picture size. do not change it somewhere else */
position: relative;
}
.image {
width: 100%;
}
.eye-container{
position: absolute;
border-radius: 50%;
background-color: red;
width: 12%;
height: 12%;
}
.left-eye {
top: 17%;
left: 36%;
}
.right-eye {
top: 17%;
left: 51%;
}
.eyeball {
position: absolute;
bottom: 3px;
right: 2px;
display: block;
width: 30%;
height: 30%;
border-radius: 50%;
background-color: #000;
}
<div class="container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/SpongeBob_SquarePants_character.svg/220px-SpongeBob_SquarePants_character.svg.png">
<div class="left-eye eye-container">
<div class="eyeball"></div>
</div>
<div class="right-eye eye-container">
<div class="eyeball"></div>
</div>
</div>