Flex布局博客特色图片小尺寸间隙问题（已解决）

我在博客的特色图片上遇到了问题：希望图片宽度为100%、最大高度为500px，高度压缩时从中心裁剪。我使用设置display: flex的DIV容器实现，但将浏览器窗口调至小尺寸时，容器高度超过实际图片，出现青绿色背景的可见间隙。

现象说明 #

• 1920px宽度时：图片正常显示，容器无多余间隙
• 814px宽度时：容器底部出现青绿色背景间隙

代码片段 #

HTML代码 #

<div class="featured-img clearfix">
    <img src="" alt="" title="" srcset="" sizes="(max-width: 2400px) 100vw, 2400px" width="2400" height="1350">
</div>

CSS代码 #

.featured-img {
    max-height: 500px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    text-align: center;
}

尝试过的无效操作 #

在当前版本Firefox浏览器中测试，尝试添加min-height和height属性均无效，原本期望容器适配图片，仅在图片高度超500px时裁剪内容。

编辑：问题已解决，我的代码中存在一处来自样式表其他部分的额外样式margin-bottom: 18px，在小尺寸下该边距逐渐显示直至达到完整的18px。还是谢谢大家！

内容的提问来源于stack exchange，提问作者orcus404