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

Question

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

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

火狐搜索结果

Chrome 结果

似乎当我注释掉“身高：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%，您必须使用 @ 987654324@

编辑

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

它的作用是创建一个包含图像的容器，然后将图像适应容器，这样您的所有图像看起来都具有相同的宽度和高度，现在您将不得不使用它一段时间，但这应该会给您你想要什么

Answer 2

我有同样的错误， 我设法解决了。

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

解决办法

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;
}