Image not having a responsive margin-bottom - html

Question

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://imgur.com/a/nL6m9ow
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>

Answer 1

body{
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 100px;
}
.avatar img{
max-width: 100px;
position:absolute;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.portfolio img {
max-width: 100%;
}
<div class="avatar">
<img src="https://www.ienglishstatus.com/wp-content/uploads/2018/04/Sad-Profile-Pic-for-Whatsapp.png" class="banner">
</div>
<div class="portfolio">
<img src="https://about.canva.com/wp-content/uploads/sites/3/2015/02/Etsy-Banners.png" class="banner">
</div>
check this code, or you can check this here also.
find the link for codepen.
https://codepen.io/atulraj89/pen/qQQBMm
Resize the window and enjoy

Answer 2

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>