How to fit a image into css-grid without stretching

Question

Problem: The IMG is stretching the css-grid, and I want the image to scale-down and fit into the grid.

Tried: I have tried setting a max-height/width on the image, but it only reduces the stretching of the image.

.grid-container {
display:grid;
grid-template-areas:
"nav_bar"
"main"
"about"
"port_over"
"resu_proj"
"links";
background-color: #161616;
grid-row-gap: 5em;
}

/*Nav bar grid*/
.nav_bar {
    display: grid;
    grid-area: nav_bar;
    grid-template-areas: "nav_img nav_links nav_links nav_links";
}

/*Nav bar img*/
.nav_img {
    grid-area: nav_img;
    object-fit: cover;

    background-color: grey;
}

<div class="grid-container">
     <div class="nav_bar">

     <img src="./MLW_IMAGES/M.L.W logo.png" class="nav_img">


     <div class="nav_links">
          <nav>
             <a href="/index.html#about">About</a>
             <a href="/index.html#portfolio">Portfolio</a>
             <a href="/index.html#contact">Contact</a>
          </nav>
     </div>
     </div>
...
</div>

Answer 1

Take one class for only image. Give particular height and width to image class and give below css to image.

.class-name img {
  max-height: 100%;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
}