CSS Grid，Chrome浏览器中"height: 100%"的网格项无法正常工作

Question

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

我一整天都在尝试创建一些卡片，并使它们正确地使用网格功能（请参见下面屏幕截图的链接）。经过一段时间的努力，我能够在Firefox中获得理想的结果，但是当我在Chrome中测试时...它与Firefox完全不同。

Firefox 结果

Chrome 结果

当我注释掉图片上的“height:100％;”时，Chrome中的功能看起来更好，但仍然不是我想要的。

去除“height：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>

有人能看出我的错误在哪里吗？

- Kelsey Harms

---

请参考以下链接中的内容，该链接涉及Flex布局，但同样适用于Grid布局：https://dev59.com/SFwX5IYBdhLWcg3wlwWQ - Michael Benjamin

https://dev59.com/51wZ5IYBdhLWcg3wM97Z#31728799 - Michael Benjamin

Chrome浏览器不会将“grid-template-rows: repeat(2, 1fr)”所得到的高度应用于子元素吗？我认为这会给它一个动态高度。 - Kelsey Harms

Answer 1

基本上发生的事情是父容器projects没有给定高度，因此当您在图像上设置100%高度时，它实际上不知道您的意思，高度是什么？

因此，要解决这个问题，您需要向父容器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;
 }

这样做的效果是创建一个容器来容纳图片，然后将图片适应容器大小，使得所有的图片看起来宽高一致。现在您需要尝试一下，但这应该可以实现您想要的效果。

- Smokey Dawson

---

这是一个好的解决方案，谢谢@JuvenileSnow！我真的想在这里使用网格布局...通过在“&__item”类上使用“grid-template-rows: repeat(2, 1fr)”，我认为那会指定一个在浏览器中确定的高度？但是我是否需要在那里为Chrome指定px或rem的高度呢？ - Kelsey Harms

我还困惑的是为什么在Firefox中似乎可以正常工作...这对我来说最令人困惑。 - Kelsey Harms

玩了一下之后，我给“.projects__item”类添加了一个高度，看起来好像可以用了！谢谢！ - Kelsey Harms

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

- Carlos Terrazas

---

你只需要将你的<img>标签放在一个<div>容器中，这个div容器必须设置宽度和高度都为100%，同时也要设置<img>标签的高度为100%。如果不配置grid-template-row并添加一个维度，那么高度设置为100%是无效的。 - Carlos Terrazas