fitting a big image in a cell

[CompleteNewb]

I have a grid layout and i want to put an image in one of the cell, but the image is really big and when i put it in the grid layout gets distorted and the cell takes the size of the image which is too big. I want to make it so that the image fits the size of the cell and not the other way around.

here's my html:
<div class="content-wrapper">
<div class="two-column-wrapper">
<div class="profile-image-wrapper">
<img src="images/Profile.jpg">
</div>
<div class="profile-content-wrapper">
<h1>Insert Bio here</h1>
<p>First</p>
<p>Second</p>
</div>
</div>

and here's my css:
.two-column-wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: center;
max-width: 100%;
max-height: 100%;
}
.profile-image-wrapper{
padding: 30px;
max-width: 100%;
max-height: 100%;
}
.profile-content-wrapper h1{
color: lightblue;
}

I'm not a programmer, I'm a complete newb. any help would be appreciated.

Thank you