css grid object-fit：覆盖在Firefox中不起作用？

Question

由于某些原因在 firefox 中使用 object-fit:cover image 不会覆盖整个父 div，但在 Chrome 中有效

这里是JsFiddle，这样更容易看到错误

<div class="main">
  <div class="cards">
      <img draggable="false" src="https://images.pexels.com/photos/952379/pexels-photo-952379.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="">
    <div class="ytSimilarityPctLabel">
      <div class="cardHeader">
        <div>
          <div id="similarity">0%</div>
        </div>
        <div class="dots">
          <div class="dot dotActive"></div>
        </div>
        <div></div>
      </div>
    </div>
    <div class="imageDescription">
      <div class="card_subs">
        <div class="card_text_tags"><span>Pewdiepie</span><span>MrBeast</span>
      </div>
      <div class="card_bio">bio</div>
    </div>
  </div>
</div>

* {
    font-family: ProximaNova,sans-serif;
}

.cards {
    transform: translate(0px);
    grid-area: cards;
    display: grid;
    justify-content: center;
    grid-template-rows: 5% 67% 28%;
    grid-template-columns: auto;
    z-index: 5;

}

.grid-container > div {
    text-align: center;
}

.imageDescription {
    display: grid;
    grid-template-rows: 65% 35%;
    grid-template-columns: auto;
    grid-template-areas: "card_subs" "card_bio";
    padding: 1vh;
    color: #fff;
    text-align: left;
}

.cards img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    max-width: 100%;
    min-height: 128%;
}

.ytSimilarityPctLabel {
    display: grid;
}

.main {
    grid-area: main;
    display: grid;
    grid-template-rows: 5vh 75vh 20vh;
    grid-template-columns: repeat(3,minmax(0,100vw));
    grid-template-areas: ". . ." ". cards ." ". buttons .";
    background-color: #f6f7fa;
}

我尝试了很多东西，但无法让它在 Firefox 上正常工作。

提前谢谢你！

Answer 1

我不确定你的最终结果是什么，但是我会尝试解释发生了什么

你已经把.card放在.main里面cards网格区域，自然.cards现在应该取那行的高度，因为.cards的高度是auto (因为你没有指定任何高度）

在CSS Grid auto 被拉伸（对齐属性的默认值）Firefox 隐含地理解这一点并将该网格区域的高度分配给.card，但是 Chrome 似乎需要明确告知。

* {
    font-family: ProximaNova,sans-serif;
}

.cards {
    transform: translate(0px);
    grid-area: cards;
    display: grid;
    justify-content: center;
    grid-template-rows: 5% 67% 28%;
    grid-template-columns: auto;
    z-index: 5;
    height: 100%;
}

.grid-container > div {
    text-align: center;
}

.imageDescription {
    display: grid;
    grid-template-rows: 65% 35%;
    grid-template-columns: auto;
    grid-template-areas: "card_subs" "card_bio";
    padding: 1vh;
    color: #fff;
    text-align: left;
}

.cards img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    max-width: 100%;
    min-height: 128%;
}

.ytSimilarityPctLabel {
    display: grid;
}

.main {
    grid-area: main;
    display: grid;
    grid-template-rows: 5vh 75vh 20vh;
    grid-template-columns: repeat(3,minmax(0,100vw));
    grid-template-areas: ". . ." ". cards ." ". buttons .";
    background-color: #f6f7fa;
}

<div class="main">
  <div class="cards">
      <img draggable="false" src="https://images.pexels.com/photos/952379/pexels-photo-952379.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="">
    <div class="ytSimilarityPctLabel">
      <div class="cardHeader">
        <div>
          <div id="similarity">0%</div>
        </div>
        <div class="dots">
          <div class="dot dotActive"></div>
        </div>
        <div></div>
      </div>
    </div>
    <div class="imageDescription">
      <div class="card_subs">
        <div class="card_text_tags"><span>Pewdiepie</span><span>MrBeast</span>
      </div>
      <div class="card_bio">bio</div>
    </div>
  </div>
</div>

---

在 Firefox 中：高度是已知的，任何基于高度的百分比值都是已知的

在 Chrome 中：高度是自动的，基于高度的任何百分比值都将是 0 所以 grid-template-rows: 5% 67% 28%; 变为 grid-template-rows: 0% 0% 0%; 但是必须定义高度，然后定义为最高的元素，然后我们计算百分比。

演示

[grid]{
  display:grid;
  grid-template-rows:50% 60% 50%;
  /* height is omitted so it defaults to auto*/
  
}

[tall]{
  height:100px;
}



/* Styling to be ignored*/
[grid]>div{
  display:flex;
  align-items:center;
  justify-content:center;
}

<div grid>
  <div style="background:red;"></div>
  <div style="background:orange;"></div>
  <div style="background:pink;" tall> I'm the tallest sibling height:100px <br> However the row i'm in is 50% of my height</div>
</div>

---

现在因为.card 没有任何高度，<img> 的所有高度限制都被忽略，因为它是由宽度限制定义的纵横比，所以它溢出了。

对预期的最终结果发表评论，我会相应地更新答案。