CSS网格，网格项＆＃34;高度：100％＆＃34;不在Chrome中工作

Question

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

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

Firefox结果

Chrome结果

当我评论出来＆＃34;身高：100％;＆＃34;在图像上，Chrome中的功能更好，但仍然不是我想要的。

Chrome with＆＃34; height：100％;＆＃34;删除：

这是我的标记：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

任何人都可以看到我出错的地方吗？

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