Image not having a responsive margin-bottom

This website I'm coding has a header with a portfolio. I want the persons "avatar" to be halfway onto the portfolio. Basically I want the avatar image to always be 50% down on to the portfolio div. The page is responsive so it shrinks accordingly. The avatar image shrinks/resizes accordingly, however; the margin-bottom doesn't keep the same proportion. I always want it to be 50% below, onto the next div. Here's the GIF. the start of it is how I want it, watch when I resize. Thanks.

https://i.sstatic.net/IsuXp.jpg

here's my code

body {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}

.avatar img {
  width: 100%;
  margin-bottom: -100px;
}

<div class="avatar">
  <img src="images/portfolio-avatar.png" class="banner">
</div>
<div class="portfolio">
  <img src="images/banner.png" class="banner">
</div>

Solution

If you use relative units (%) for the width of your avatar, as well as the padding-top, it will grow/shrink accordingly.

body {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}

.avatar {
  position: relative;
  padding-top: 7.5%;
}

.avatar img {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15%;
  border-radius: 50%;
  border: 6px solid white;
}

.portfolio img {
  max-width: 100%;
}

<div class="avatar">
  <img src="https://picsum.photos/120/120
" class="banner">
</div>
<div class="portfolio">
  <img src="https://picsum.photos/1200/400" class="banner">
</div>