How to fit image in a css grid row without it expanding

Question

I am trying to add an img inside the .grid-banner div so that the full img fits inside the div without expanding it.

I have a mosaic style Css grid layout like so:

Css

.gridContainer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 2px;
}

.grid-header {
  background-color: red;
  grid-column: 1/13;
  display: flex;
}

.grid-banner {
  background-color: green;
  grid-column: 1/13;
  grid-row: 2/4;
}

.grid-content {
  background-color: orange;
  grid-column: 1/10;
  grid-row: 4/11;
}

.grid-menu {
  background-color: blue;
  grid-column: 10/12;
  grid-row: 3/11;
}

.grid-footer {
  background-color: purple;
  grid-column: 1/13;
}

Answer 1

You have two options, either use a background image and place an 'img' tag inside the grid-banner div.

First Way: Place image inside the grid-banner

.grid-banner {
  background-color: green;
  grid-column: 1/13;
  grid-row: 2/4;
}
.grid-banner img{
width:auto;
max-width:100%;
object-fit:cover;
}

Second option: background-image

In this approach you have to add some height to your container, only then background-image can appear.

.grid-banner {
  background-color: green;
  grid-column: 1/13;
  grid-row: 2/4;
  min-height:300px;
background-image:url(demo.jpg);
background-attachement:scroll;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
}

Answer 2

I think you should just fix the height of the grid container:

.gridContainer {
   height: 50vh;
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-auto-rows: minmax(50px, auto);
   grid-gap: 2px;
}

.grid-banner img{
   height:100%;
   width:100%;
   object-fit:cover;
}