Auto Fit inner div grid to outer column and row height with CSS

Question

我有一个图片库，它包含的 div 溢出了。我尝试了各种解决方案都无济于事。 什么 CSS 代码方法将使网格适合固定高度的外部 div，包括使每个带有标题的图像自动调整大小/缩放以按比例适应？

我试过的

我尝试的基本方法是这样的：

1. 在容器 div 上设置固定高度
2. 设置容器div的直接子级为height:100%，这样它会自动填充可用空间

另外，我试过在不同级别的嵌套内容项上设置高度和宽度，但无济于事。我不确定我错过了什么。

这里是直播站点的链接：http://elijahlisttv.org/home-3/

Answer 1

好吧，我没有找到这个确切/具体问题的答案，但我确实找到了我试图解决的问题的答案。对 CSS 进行了更多尝试后，看起来根本问题是我似乎无法删除右侧行之间的间距。我试过删除边距、填充，并确保没有任何类型的“间隙”属性。没有爱。

解决方案： 拖动列宽，直到右列中的 Elementor 帖子网格小部件看起来与左列中的图像相同。

仍在回答如何使用 CSS 执行此操作。

Answer 2

Elementor 生成糟糕的代码😭.
下面我提供了一种实施方案。

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  max-width: 1200px;
}

.cell:first-child {
  grid-row: span 2;
  grid-column: span 2;
}

.cell img {
  aspect-ratio: 16/9;
  display: block;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}

<div class="grid">
  <div class="cell">
    <img src="https://picsum.photos/600/340" alt="">
  </div>
  <div class="cell">
    <img src="https://picsum.photos/600/340" alt="">
  </div>
  <div class="cell">
    <img src="https://picsum.photos/600/340" alt="">
  </div>
  <div class="cell">
    <img src="https://picsum.photos/600/340" alt="">
  </div>
  <div class="cell">
    <img src="https://picsum.photos/600/340" alt="">
  </div>
</div>