Trouble with Responsive Design: Overflow issue when placing image inside a circle

I'm currently working on a responsive design, and I'm facing an issue when trying to place an image inside a circle without it overflowing. I have a circular container, and I want the image to fit within the circle without any overflow, especially when the screen size changes.

#inner {
  position: absolute;
  left: 10vw;
  max-width: 30%;
}

.circled {
  width: 30vw;
  height: 30vw;
}

.container {
  width: 80vw;
}

#outer {
  position: relative;
  left: -10vw;
  bottom: 20vh;
  width: 400px;
  height: 400px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circle</title>
  <link rel="stylesheet" href="./styles.css">
</head>

<body>
  <div class="container">
    <div class="circled"><img id="inner" src="https://i.postimg.cc/yNNG527Q/pfp.png"><img id="outer" src="https://i.postimg.cc/K8bS99Kw/circle.gif"></div>
  </div>

</body>

</html>

I've tried using CSS properties like max-width: 100% and max-height: 100% to ensure the image doesn't exceed the dimensions of the circle, but it doesn't seem to work as expected. The image still overflows sadly. I want to achieve a responsive design without relying too heavily on media queries.

Solution

I believe this is what you're asking. If you want two images to stack on top of each other perfectly every time, one method is this:

Stack one on top of the other (like you have) with one being position: relative; and the other position: absolute;
Place them both inside a container to group them. If you want to move them at different screen widths, then move this parent container. Moving one parent element is going to be quicker than moving two individual items. Set the parents position, which here is set to position: relative. This gives the two images a shared common starting point.
Set the images widths, and then their positions which will be relative to the parent.

As mentioned in the comments, there are multiple ways to achieve what you're trying to do. Using background-image is another method, although I find it easier to use another HTML div so I don't have to recall all of the CSS background image properties to accomplish the same thing.

.container {
  width: 80vw;
  position: relative;
}

.circled {
  width: 30vw;
  height: 30vw;
  position: relative;
}

#inner {
  position: relative;
  width: 100%;
  height: auto;
}

#outer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circle</title>
  <link rel="stylesheet" href="./styles.css">
</head>

<body>
  <div class="container">
    <div class="circled">
      <img id="inner" src="https://i.postimg.cc/yNNG527Q/pfp.png">
      <img id="outer" src="https://i.postimg.cc/K8bS99Kw/circle.gif">
    </div>
  </div>

</body>

</html>