CSS Grid, элемент сетки "height: 100%" не работает в Chrome

Question

Это мой первый пост здесь ... так что, надеюсь, я получу всю необходимую информацию в этом вопросе.

Я целый день работаю над попыткой получить правильную функциональность сетки на некоторых картах.Создаю (см. ссылки на скриншоты ниже).Поработав некоторое время, я смог получить желаемые результаты в Firefox, но когда я тестировал в Chrome ... Он не похож на Firefox.

Результаты Firefox

Результаты Chrome

Кажется, когда я комментирую "height: 100%;"на изображении функциональность лучше в Chrome, но все еще не то, что я хочу.

Chrome с "height: 100%;"удалено:

Вот моя разметка:

.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>

Кто-нибудь может увидеть, где я ошибся?

Answer 1

Итак, в основном происходит то, что родительскому контейнеру не присваивается высота projects, поэтому, когда вы говорите 100% height на изображении, он на самом деле не знает, что вы имеете в виду, высота чего ??

Таким образом, чтобы исправить это, вам нужно будет добавить высоту к вашему родительскому контейнеру projects, теперь вы можете установить это как хотите, но если вы хотите, чтобы оно составляло 100% от высоты экрана, вы должны использовать * 1006.*

edit

При дальнейшей проверке все выглядит так, как будто вы хотите, чтобы все изображения были выровнены одинаково, поэтому вам нужно будет удалитьimage tag и создайте div следующим образом:

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

, затем в вашем 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;
 }

создаст контейнер, содержащий изображение, и затем поместит изображение вКонтейнер, чтобы все ваши изображения выглядели одинаково по ширине и высоте, теперь вам придется немного поиграться с ним, но это должно дать вам то, что вы хотите