CSS 网格，网格项 "height: 100%"在 Chrome 中不起作用

Question

这是我在这里的第一篇文章......所以希望我能得到这个问题的所有必要信息。

我整天都在努力尝试在我创建的一些卡片上获得正确的网格功能(请参阅下面的屏幕截图链接)。工作了一段时间后，我能够在 Firefox 中获得我想要的结果，但是当我在 Chrome 中测试时......它与 Firefox 相去甚远。

Firefox 结果

Chrome 结果

当我注释掉“height: 100%;”时似乎在图像上，Chrome 中的功能更好，但仍然不是我想要的。

带有“高度:100%；”的 Chrome删除:

这是我的标记:

.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%你必须使用 height: 100vh

编辑

进一步检查，您似乎希望所有图像也以相同方式排列，因此您需要做的就是删除图像标签并创建一个像这样的 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;
 }

它所做的是创建一个容器来保存图像，然后使图像适合容器，这样您的所有图像看起来都具有相同的宽度和高度，现在您将不得不尝试一下，但这应该会给您你想要什么