Html 如何忽略包含以下元素的溢出内容？

我有一个ul列表，每个li中包含一个figure元素。 图形的img元素I的下半部分通过使用overflow:hidden对父元素和width:100%对img元素进行隐藏

但是因此，figure元素的高度仍然是“最大”的，所以我想我需要一些额外的东西来防止这种情况。为了更好地可视化问题，我对其进行了截屏：

我使用此代码设置li和figure元素的样式：

.rf_re1_produkt_details *{
    box-sizing: border-box;
}

.rf_re1_produkt_details ul{
    width:100%;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    height:auto;
    margin-top:45px;
}

.rf_re1_produkt_details li{
    width:40%; /* Originally it's 50%, but to prevent the whitespace-problem of inline-block here, I adjusted it for a quick and dirty view */
    display: inline-block;
    margin:0;
    border:0;
    list-style: none;
    overflow:hidden;
    height:auto;
}

.rf_re1_produkt_details li:nth-of-type(odd){
    border-right:1px solid #fff;
}

.rf_re1_produkt_details figure{
    padding: 0;
    margin:0;
    border:0;
    overflow:hidden;

}

.rf_re1_produkt_details figure img{
    width: 100%;

}

这就是标记，因此：

<section class="rf_re1_produkt_details">
    <ul>
        <li>
            <figure>
                <img src="bilder/fooimg1" />
                <figcaption>Unüberwindliche Weichen</figcaption>
            </figure>
        </li>
        <li>
            <figure>
                <img src="bilder/fooimg3.jpg" />
                <figcaption>Zigeunerschnitzel (Oops, Polizei)</figcaption>
            </figure>
        </li>
        <li>
            <figure>
                <img src="bilder/fooimg2.jpg" />
                <figcaption>Apfelstrudel</figcaption>
            </figure>
        </li>
        <li>
            <figure>
                <img src="bilder/fooimg1.jpg" />
                <figcaption>Foo</figcaption>
            </figure>
        </li>
    </ul>
</section>

乌努贝尔温德里奇·魏晨


Zigeunerschnitzel（哦，Polizei）


Apfelstrudel


福

所以，我基本上想消除两排li块之间的白色间隙。如果不对图像或图形使用固定尺寸，我将如何做到这一点

---

感谢我的特殊情况，我刚刚意识到数字元素太高导致了差距。我通过使用vw值作为图形的最大高度（仅适用于我的特定情况）修复了此问题。因此，我检查了图像的尺寸，并根据容器的尺寸进行了计算。

您能创建输出的演示吗？在这里使用JSFIDLE或代码片段。如果我在codepen中输入您的代码，我不会得到您提供的图片上的任何内容。您是否可以为示例添加更多代码以适当地工作您需要在标记中加入空格，因为我在那里使用内联块，并且希望在这里保持它的可读性。或者你在.rf_re1_produkt_details li（比如40%）上使用一些较小的百分比-我会在问题本身中相应地更新它。