Make image fit div and resize accordingly - html

Question

I'm currently making a forum in school, and I'm working on a profile page. On this profile page, I want to have a couple of banners that the users can choose from. I want to make these banners the same size as the div they're in. I also want them to be centred inside the div and resize it. Is it possible to do what I have shown in the two images where the banner get's cut off when it's resized?
This is my code:
.user-pic {
width: 120px;
border: 3px solid #1b1b1b;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
float: left;
margin: 10px;
transition: .4s ease-in-out;
z-index: 2;
}
.user-pic:hover {
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.user-pic-overlay {
width: 120px;
position: absolute;
border: 3px solid #1b1b1b;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
margin: 10px;
opacity: 0;
transition: .5s ease-in-out;
z-index: 3;
}
.user-pic-overlay:hover {
opacity: .8;
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
}
.user-header-wrap {
width: 75%;
margin: 25px auto;
box-shadow: 0 5px 35px 0 rgba(0, 0, 0, 0.4);
}
.user-header {
height: 33vh;
margin: auto;
border: 5px solid #1b1b1b;
box-shadow: 0 -25px 100px -22px inset rgba(0, 0, 0, 0.8);
z-index: 2;
}
.user-header-pic {
position: absolute;
z-index: -2;
margin: auto;
width: 75%;
}
.user-header-pic-overlay {
position: absolute;
margin: auto;
height: 33vh;
opacity: 0;
cursor: pointer;
transition: .4s ease-in-out;
}
.user-header-pic-overlay:hover {
opacity: .8;
}
.user-header-nav {
background-color: #1e1e1e;
border: 5px solid #1e1e1e;
text-align: right;
margin: auto;
}
.user-header-btn {
margin: 5px 5px 5px 5px;
padding: .4em .6em;
background-color: #424242;
border-radius: 2px;
font-size: 14px;
color: #f5f5f5;
cursor: pointer;
border: none;
}
.user-haeder-btn:focus {
outline: none;
}
<div class="user-header-wrap">
<div class="user-header">
<img class="user-header-pic" src="../images/header.jpg" alt="">
<img class="user-pic" src="<?php echo $ppp;?>" alt="">
<p class="prof-txt"><?php $ss = $_SESSION["GLOBALNAVN"]; echo $ss; ?></p>
<p class="prof-txt-2">Level</p>
</div>
<div class="user-header-nav">
<button class="user-header-btn">Edit Profile</button>
</div>
</div>
First Image Second Image

Answer 1

added
.user-header-pic {
position: relative;
z-index: -2;
margin: auto;
width: 100%;
height: 100%;
}
.user-pic {
width: 120px;
border: 3px solid #1b1b1b;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
float: left;
margin: 10px;
transition: .4s ease-in-out;
z-index: 2;
}
.user-pic:hover {
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.user-pic-overlay {
width: 120px;
position: absolute;
border: 3px solid #1b1b1b;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
margin: 10px;
opacity: 0;
transition: .5s ease-in-out;
z-index: 3;
}
.user-pic-overlay:hover {
opacity: .8;
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
}
.user-header-wrap {
width: 75%;
margin: 25px auto;
box-shadow: 0 5px 35px 0 rgba(0, 0, 0, 0.4);
}
.user-header {
height: 33vh;
margin: auto;
border: 5px solid #1b1b1b;
box-shadow: 0 -25px 100px -22px inset rgba(0, 0, 0, 0.8);
z-index: 2;
}
.user-header-pic {
position: relative;
z-index: -2;
margin: auto;
width: 100%;
height: 100%;
}
.user-header-pic-overlay {
position: absolute;
margin: auto;
height: 33vh;
opacity: 0;
cursor: pointer;
transition: .4s ease-in-out;
}
.user-header-pic-overlay:hover {
opacity: .8;
}
.user-header-nav {
background-color: #1e1e1e;
border: 5px solid #1e1e1e;
text-align: right;
margin: auto;
}
.user-header-btn {
margin: 5px 5px 5px 5px;
padding: .4em .6em;
background-color: #424242;
border-radius: 2px;
font-size: 14px;
color: #f5f5f5;
cursor: pointer;
border: none;
}
.user-haeder-btn:focus {
outline: none;
}
<div class="user-header-wrap">
<div class="user-header">
<img class="user-header-pic" src="https://images.unsplash.com/photo-1553052944-763b0cbd086a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="">
<img class="user-pic" src="<?php echo $ppp;?>" alt="">
<p class="prof-txt"><?php $ss = $_SESSION["GLOBALNAVN"]; echo $ss; ?></p>
<p class="prof-txt-2">Level</p>
</div>
<div class="user-header-nav">
<button class="user-header-btn">Edit Profile</button>
</div>
</div>