Question

我有一个ul-list，每个li中包含1个figure元素。数字的下半部分＆＃39; img-element我使用overflow隐藏：隐藏到父元素和宽度：100％到img元素。

但是因此，人物元素的高度仍然是＆＃34;最大值＆＃34;一，所以我想我需要额外的东西来防止这种情况。我将其截图以更好地显示问题：

我使用此代码来设置li和figure-elements的样式：

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

所以，我基本上想要摆脱2＆＃34;行之间的白色差距＆＃34;李块。如何通过不对图像或图形使用固定尺寸来做到这一点？

由于

Answer 1

就我的具体情况而言，我刚刚意识到造成这种差距的数字元素过高。我修复此问题 - 仅适用于我的特定情况 - 使用vw值作为图形的最大高度。因此，我检查了图像的尺寸，并根据容器的尺寸计算出来。

如何使用以下元素忽略溢出的内容？

1 个答案: