小编Kel*_*rms的帖子
CSS 网格，网格项“高度：100%”在 Chrome 中不起作用
这是我在这里的第一篇文章......所以希望我能在这个问题中得到所有必要的信息。
我一整天都在努力尝试在我正在创建的某些卡片上获得正确的网格功能（请参阅下面的屏幕截图链接）。工作一段时间后，我能够在 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 …6
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数