百分比宽高设置下绝对定位图片尺寸异常问题求助

问题分析与解决方案 #

根源解析

问题出在img标签的默认inline元素特性：浏览器会为inline元素预留垂直间隙（用于容纳字体基线、下行字母如g、y），导致父容器#imageComparison的高度比img1实际高度多出几个像素（数值取决于浏览器默认字体配置）。

而img2是absolute定位，它的height:100%基于父容器高度计算，自然比img1高了这部分间隙；宽度按百分比计算后，配合object-fit:cover，视觉上就会显得过宽。

最优修复方案

直接消除inline元素的垂直间隙，两种可靠方法：

方法1：将img设为块级元素

给img1添加display:block，彻底消除inline元素的间隙：

#img1 {
    width: 100%;
    filter: grayscale(100%);
    display: block; /* 新增此行 */
}

方法2：清空父容器的行高/字体大小

如果不想修改img的display属性，给父容器#imageComparison设置line-height:0：

#imageComparison {
    position: relative;
    background-color: rgb(150, 50, 50);
    line-height: 0; /* 新增此行 */
}

用这两种方法后，父容器高度会完全贴合img1的实际高度，img2的height:100%会和img1高度一致，无需硬编码像素值的临时修复。

关于临时fix的像素来源

你用到的-4px或项目中的-8px，本质是浏览器默认的inline元素垂直间隙大小，这个数值和浏览器默认的font-size、line-height直接相关：比如默认font-size为16px、line-height为1.2时，间隙约为4px；若项目有自定义字体配置，间隙可能变为8px。这种硬编码数值的方法不可靠，换环境容易失效。

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