HTML Image grid images not in the grid

IM very new to css grid and i am having difficulties getting my images to fall into the grid for whatever reason. they seem to be representing on top of my grid not within.. any help would be appreciated..

Ive added colors to the borders to outline how i want the shape and stuff.

* {
  width: 100% margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid-container {
  width: 100% position: absolute;
  display: grid;
  height: 100vh;
  border: 10px solid green;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-items: flex-center;
}

.grid-item {
  background-color: Grey;
  border: 4px solid orange;
  padding: 10px;
  font-size: 30px;
}

.container2 {
  object-fit: cover;
  max-width: 50% height:auto;
}

.grid-container .image {
  position: relative;
  max-width: 100%;
  height: auto;
}

.div1 {
  grid-area: 1 / 1 / 3 / 3;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.div2 {
  grid-area: 1 / 3 / 2 / 4;
  max-width: 100%;
}

.div3 {
  grid-area: 1 / 4 / 2 / 5;
  max-width: 100%;
}

.div4 {
  grid-area: 1 / 5 / 2 / 6;
  max-width: 100%;
}

.div5 {
  grid-area: 2 / 3 / 3 / 4;
  max-width: 100%;
}

.div6 {
  grid-area: 2 / 4 / 3 / 5;
  max-width: 100%;
}

.div7 {
  grid-area: 2 / 5 / 3 / 6;
  max-width: 100%;
}

<div class="grid-container">
  <div class="grid-item div1">
    <div class="container2">

      <img src="https://www.wendtcorp.com/wp-content/uploads/2020/08/Sikirica-600x600-1.jpg" alt="Srdjan Sikirica" class="image"> </img>

      <div class="overlay">Srdjan Sikirica</div>
    </div>

  </div>
  <div class="grid-item div2">Test2

  </div>
  <div class="grid-item div3 ">test3

  </div>
  <div class="grid-item div4 ">test4

  </div>
  <div class="grid-item div5">test5

  </div>
  <div class="grid-item div6 ">test6
  </div>
  <div class="grid-item div7">test7

  </div>

I watched some videos and this was as far as i got, i am still learning how and when to combine classes and stuff. I did some goodgle searching and most people just put blurbs of information together which wasnt helpful at all.

Thank you for any and all help you can provide!!

Solution

Is this what you want?

I added the object-position: 0% 0%; if you want the image to be in the center you need to use 50% 50%

.container2 {
  width: 100%;
  height: 100%;
}
.container2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: 0% 0%;
}