添加overflow:hidden后网格图片异常扩大的问题求助

我给网格布局内的图片添加了鼠标悬停缩放（transform: scale(1.05)）效果，为避免图片缩放时超出网格范围，给图片所在的.post容器类添加了overflow:hidden属性。但添加该属性后，图片出现了异常扩大的情况，只有移除overflow:hidden才能恢复正常显示。

效果对比 #

• 添加overflow:hidden前：图片正常适配网格容器，悬停缩放时会超出容器边界
• 添加overflow:hidden后：图片被异常拉伸放大，显示错位

问题代码 #

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;        /* 引发问题的属性 */   
  }

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

问题原因 #

Grid布局中，网格项默认的min-height为auto，当给网格项（.post）添加overflow:hidden时，会触发网格项的尺寸计算规则变化：原本网格项会严格遵守grid-template-rows设定的轨道高度，但overflow:hidden加上图片的height:100%，会让网格项被图片内容撑开，导致图片异常放大。

解决方案 #

给.post容器添加min-height:0，强制网格项遵守轨道的高度限制，避免被内容拉伸：

.post {
  padding: 0px;
  box-sizing: border-box;
  position: relative;       
  text-align: center;      
  overflow: hidden;
  min-height: 0; /* 添加这一行 */
}

另外可以给图片的hover效果加上transform-origin: center，让图片从中心缩放，优化视觉体验：

.post img:hover {
  -ms-transform: scale(1.05);     
  -webkit-transform: scale(1.05); 
  transform: scale(1.05);
  transform-origin: center; /* 可选优化 */
}

修改后，overflow:hidden可以正常裁剪超出容器的缩放部分，同时图片不会再出现异常放大的情况。

内容的提问来源于stack exchange，提问作者André