css - 溢出 : hidden; not working on image inside grid

Question

我有一个网格内的图像，我希望图像填充网格容器，并隐藏任何溢出，请参见代码:

    <div class="serviceFlexChildLeft serviceGridImage">
      <img id="broadcastProductionImage1" src="content/images/homepage/broadcastProduction2.png">
      <img id="broadcastProductionImage2" src="content/images/homepage/broadcastProduction3.png">
      <div id="broadcastSlash"></div>
    </div>

.serviceGridImage {
    display: grid;
    height: 40rem;
    grid-template: 50% 50% / 100%;
    overflow: hidden;
}

#broadcastProductionImage1 {
    object-fit: cover;
    justidy-self: center;
    align-self: center;
    grid-area: 1 / 1 / 2 / 2;
    overflow: hidden;
}

#broadcastProductionImage2 {
    object-fit: cover;
    justify-self: center;
    align-self: center;
    grid-area: 2 / 1 / 3 / 2;
    overflow: hidden;
}

你可以看到我试过输入 overflow: hidden在图像本身和网格父级上，两者似乎都没有任何效果，我都使用了 object-fit: cover;和 min-width: 100%; min-height: 100%;尝试实现我想要的结果，似乎都没有产生我想要的结果，一旦我定义了 width，它似乎确实有效或 height没有 min ，但它们都会破坏图像动态缩放和适应容器的能力。

建议？

Answer 1

问题是，您直接为图像设置了 overflow: hidden，但 overflow: hidden 的工作方式不同。
例如，您创建一个具有高度和宽度的 div 并将其设置为 overflow: hidden，您的图像 inside 将不再重叠。


当然，您将 overflow:hidden 设置为您的 .serviceGridImage 但这包含两个图像，因此现在没有任何东西溢出 .serviceGridImage 。您的图像溢出网格，而不是 div。

如果你给图像一个最大高度值，你可以解决你当前的问题。

.serviceGridImage {
    display: grid;
    height: 40rem;
    grid-template: 50% 50% / 100%;
    overflow: hidden;
}

#broadcastProductionImage1 {
    object-fit: cover;
    justify-self: center;
    align-self: center;
    grid-area: 1 / 1 / 2 / 2;
    overflow: hidden;
}

#broadcastProductionImage2 {
    object-fit: cover;
    justify-self: center;
    align-self: center;
    grid-area: 2 / 1 / 3 / 2;
    overflow: hidden;
}

.serviceGridImage img {
    max-height: 100%;
}

<div class="serviceFlexChildLeft serviceGridImage">
      <img id="broadcastProductionImage1" src="https://images.unsplash.com/photo-1613470651441-9f59d6918dd6?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
      <img id="broadcastProductionImage2" src="https://images.unsplash.com/photo-1613465892991-39d8d5fb2d3a?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
      <div id="broadcastSlash"></div>
    </div>

或者像这样更改您的 HTML 结构:

.serviceGridImage {
    display: grid;
    height: 40rem;
    grid-template: 50% 50% / 100%;
    overflow: hidden;
}
.image {
  display: grid;
  grid-area: 1 / 1 / 2 / 2;
  overflow: hidden;
}

.image.second {
   grid-area: 2 / 1 / 3 / 2; 
}

#broadcastProductionImage1 {
    object-fit: cover;
    justify-self: center;
    align-self: center;
    
    overflow: hidden;
}

#broadcastProductionImage2 {
    object-fit: cover;
    justify-self: center;
    align-self: center;
    overflow: hidden;
}

<div class="serviceFlexChildLeft serviceGridImage">
      <div class="image">
        <img id="broadcastProductionImage1" src="https://images.unsplash.com/photo-1613470651441-9f59d6918dd6?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
      </div>
      <div class="image second">
        <img id="broadcastProductionImage2" src="https://images.unsplash.com/photo-1613465892991-39d8d5fb2d3a?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
      </div>
      <div id="broadcastSlash"></div>
    </div>