CSS Grid, grid item "height: 100%" not working in Chrome

Question

This is my first post here... so hopefully I get all of the necessary info in this question.

I've been working all day on trying to get the correct grid functionality on some cards I'm creating (see links to screenshots below). After working a while, I was able to get my desired results in Firefox, but when I test in Chrome... It's not anywhere close to the same as Firefox.

Firefox Results

Chrome Results

It seems when I comment out "height: 100%;" on the image the functionality is better in Chrome, but still not what I'm wanting.

Chrome with "height: 100%;" removed:

Here's my markup:

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
  grid-gap: 7rem;
  &__item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  &__img {
    width: 100%;
    height: 100%;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    display: block;
    object-position: center;
    object-fit: cover;
  }
}

<section class="projects">
  <div class="projects__item projects__item--1">
    <img src="img/projects-1.png" class="projects__img">
    <div class="projects__content">
      <h3 class="projects__heading--3 heading-3">Project Title</h3>
      <p class="projects__text">
        Insert Text
      </p>
    </div>
  </div>
</section>

Can anyone see where I've gone wrong?

Answer 1

So basically what Is happening is there is no height given to the parent container projects so when you say 100% height on the image it doesn't actually know what you mean, height of what??

So to fix it you will need to add a height to your parent container projects, now you can set that to be whatever you like but if you want it to be 100% of the screen height you have to use height: 100vh

edit

On further inspection it looks as if you want all the images to line up the same way as well so what you will have to do is remove your image tag and create a div like so..

<div class="img_container">
</div>

then in your css

.img_container{
    height: 50%; // or whatever value just make sure you give your parent a height
    width: 100%;
    background: url('link to your image') 50% no-repeat;
    background-size: cover;
 }

what this does is creates a container that holds the image and then fits the image to the container so all your images look the same width and height, now you will have to play around with it for a bit but this should give you what you want

Answer 2

I had the same error , I managed to solve it.

HTML ERROR ->
<div class="container-grid">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
</div>

The solution

HTML

<div class="container-grid">
    <div class="image"><img src="1.jpg" /></div>
    <div class="image"><img src="2.jpg" /></div>
    <div class="image"><img src="3.jpg" /></div>
</div>

IN YOUR CSS
.galeria .image {
  height: 100%;
  width: 100%;
}
.galeria .image img {
  width: 100%;
  height: 100%; 
  object-fit: cover;
}