CSS网格，网格项“高度: 100%”不能在Chrome中工作

Question

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

我一整天都在努力在我正在创建的一些卡片上获得正确的网格功能(参见下面屏幕快照的链接)。在工作了一段时间后，我能够在Firefox上获得我想要的结果，但是当我在Chrome上测试时…它在任何地方都与火狐不同。

Firefox结果

​

​

铬结果

​

​

当我在图片上评论“高度:100%”时，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;
 }

它所做的是创建一个容器，该容器保存图像，然后将图像与容器相匹配，因此您的所有图像看起来都是相同的宽度和高度，现在您将不得不对其进行一段时间的操作，但这将满足您的需要。

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