在网格布局中无法获得相同的 img 高度答案

【问题标题】：Can't get the same img height in grid layout在网格布局中无法获得相同的 img 高度
【发布时间】：2019-07-16 21:06:43
【问题描述】：

所以我使用网格布局来显示 4 张图片。问题是我无法让第二行的图片高度相同：

我的 HTML 是：

<section id="gallery">
    <h2>Gallery</h2>
    <div id="img-container">
        <img src="img/business1.jpg" alt="">
        <img src="img/business2.jpg" alt="">
        <img src="img/business4.jpg" alt="">
        <img src="img/business5.jpg" alt="">
    </div>
</section>

还有我的 CSS：

#gallery #img-container {
    padding:20px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}

#gallery img {
    width: 100%;
    object-fit: cover;
}

#gallery #img-container img:first-child {
    grid-column: 1 / 4;
}

【问题讨论】：

你想如何对齐它们？它现在对齐到顶部，但是对齐了。更具体。
这可能不是很明显，但如果你看最下面一行，我希望它们的高度相同
哦，好的，所以，相同的高度与对齐它们不同。您的要求是否可以为拇指行添加固定高度？如果是这样，您可以让图像的高度为 100%（除了第一个），但您需要在第二行有一个固定的高度，以便浏览器可以进行该计算。
我需要避免对行使用静态高度。
您可以使用 vh 或 vw 单位，它是固定的，但不是静态的。

标签： css grid frontend

【解决方案1】：

为第 3 和第 4 图像添加 'height="100%"'：

<section id="gallery">
    <h2>Gallery</h2>
    <div id="img-container">
        <img src="img/business1.jpg" alt="">
        <img src="img/business2.jpg" alt="">
        <img src="img/business4.jpg" alt="" height="100%">
        <img src="img/business5.jpg" alt="" height="100%">
    </div>
</section>

【讨论】：

我希望有一个无需硬编码高度的解决方案

【解决方案2】：

我明白了，使用max-content（因此高度是三个图像中的最大值）作为拇指行高度，使用align-self: stretch 作为图像，这样它们就不会尊重纵横比：

#gallery #img-container {
    padding:20px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto max-content;
}

#gallery img {
    width: 100%;
    object-fit: cover;
    align-self: stretch;
}

https://codepen.io/anon/pen/mvNyJG

【讨论】：