Flexbox容器高度高于内容图片，hover缩放时底部出现间隙求助

问题原因 #

你遇到的高度差是行内替换元素的默认基线对齐特性导致的：
<img> 属于默认行内替换元素，默认vertical-align值为baseline，浏览器会为文本的下行字符（如g、p、y的下沉部分）预留底部空间，这部分额外空间就是你观测到的2.5px间隙。
你之前尝试的align-items: center是控制flex子项在flex容器交叉轴的对齐规则，作用层级是flex容器和flex子项之间，无法影响flex子项内部的img对齐逻辑，所以不会生效。大部分CSS Reset方案不会主动修改img的默认对齐属性，所以即使用了Eric Meyer的Reset也不会覆盖这个默认特性。

解决方案 #

任选以下任意一种即可修复问题：

• 给img修改对齐规则，添加vertical-align: bottom/vertical-align: top/vertical-align: middle属性，直接消除基线预留空间：

.flex-item > img {
    max-width: 100%;
    vertical-align: bottom; /* 新增行 */
    transform: scale(1);
    transition: all 0.2s ease-in-out;
}

• 把img改为块级元素，自动取消行内元素的基线对齐特性：

.flex-item > img {
    display: block; /* 新增行 */
    max-width: 100%;
    transform: scale(1);
    transition: all 0.2s ease-in-out;
}

• 仅针对纯图片容器场景：给父元素.flex-item设置font-size: 0，通过清除字体大小间接消除基线预留空间（不推荐，如果子项需要放置文字会导致文字不可见）

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