当我将溢出：隐藏到其容器中时，我的图像在网格内展开

Question

我刚刚完成向网格内的图像添加变换，以便将鼠标悬停在图像上时它们会显示一点缩放。然后我添加了一个溢出：隐藏到包含图像的类“.post”，这样它们就不会缩小网格。 然而，一旦我添加隐藏的溢出，我的图像就会扩大一点，我无法修复它。只有删除隐藏的溢出。

下面是我的 html 和 css 代码以及两张照片：其中一张是在添加隐藏的溢出之前（这就是我想要的最终产品的样子），一张是之后的效果。

HTML

<div class="container">
  <div class="post box1">
    <img src="images/favfilms.jpg" alt="">
    <p class="img-text">Ranked: My Favorite Movies (5★ ratings)</p>
    </div>

  <div class="post box2">
    <img src="images/chungking.jpg" alt="">
    <p class="img-text">Chungking Express Review</p>
  </div>

  <div class="post box3">
    <img src="images/donnie.jpg" alt="">
    <p class="img-text">Donnie Darko Review</p>
  </div>

  <div class="post box4">
    <img src="images/dk.jpg" alt="">
    <p class="img-text">Perfect Blue Review</p>
  </div>
</div>

CSS

.container {
    display: grid;
    grid-template-columns: 55% 22.5% 22.5%;
    grid-template-rows: 1fr 1fr;
    gap: 2.5px;
    height: 580px;
    max-width: 1700px;
    width: 90%;
    margin: auto;
    padding: auto;
  }

  .post {
    padding: 0px;
    box-sizing: border-box;
    position: relative;       
    text-align: center;      
    overflow: hidden;        /*THIS IS THE OVERFLOW IN QUESTION*/   
  }

  .img-text {
    z-index: 100;
    position: absolute;
    color: white;
    font-weight: bold;
    font-family: sans-serif;
    bottom: 8px;
    left: 16px;
  }

  .post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(75%);
    transition: 1s;
  }
  
  .post img:hover {
    -ms-transform: scale(1.05);     
    -webkit-transform: scale(1.05); 
    transform: scale(1.05); 
  }

  .box1 {
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
  }

  .box2 {
    grid-column: 2 / span 2;
    grid-row: 1 / span 1;
  }

  .box3 {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
  }

  .box4 {
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
  }

Answer 1

问题出在这行css代码中：

grid-template-rows: 1fr 1fr;

在当前配置中，当您将 grid row 设置为 fr 时，整个容器的高度将取决于您放入其中的照片的高度。您将两行设置为相同的 fr 值，如果您在其中一行中插入一张比另一行小的照片，它将调整为较大的一张，这将增加容器。作为快速修复，由于您将高度设置为 580px，因此您可以将这行代码替换为：

grid-template-rows: 290px 290px;

容器行的高度将被固定，照片将保持相同的大小。

问候！