溢出：隐藏；不适用于网格内的图像答案

【问题标题】：overflow: hidden; not working on image inside grid溢出：隐藏；不适用于网格内的图像
【发布时间】：2021-05-20 01:12:24
【问题描述】：

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

    <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%; 来尝试实现我想要的结果，似乎都没有产生我想要的结果，一旦我在没有min 的情况下定义width 或height，它似乎确实可以工作，但它们都会破坏图像动态缩放和适应容器的能力。

建议？

【问题讨论】：

任何codepen或jsfiddle链接，以便我们可以更清楚地看到它？

标签： css css-grid

【解决方案1】：

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

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

如果你给图像一个 max-height 值，你可以解决你当前的问题。

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

【讨论】：