CSS 网格，网格项“高度：100%”在 Chrome 中不起作用

Question

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

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

火狐搜索结果

Chrome 结果

似乎当我注释掉“高度：100%；” 在图像上，Chrome 中的功能更好，但仍然不是我想要的。

Chrome 带有“高度：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%，则必须使用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;
 }

这样做是创建一个容器来保存图像，然后将图像放入容器中，这样您的所有图像看起来都具有相同的宽度和高度，现在您将不得不使用它一段时间，但这应该会给您想要的