使用伪元素后的图像重叠

Question

我正在尝试使用 ::after 伪元素创建图像叠加层，总体上完成了工作，但有一个小错误。出于某种原因，图像底部有一些空间，我不知道为什么。我试图删除边距、填充和框大小，但它仍然显示相同的结果。任何帮助表示赞赏，谢谢

html：

<div class="heroimage">
        <img src="/images/image-header-mobile.jpg" alt="working people">
</div>

css (sass):

.heroimage {
position: relative;
margin: 0;
padding: 0;
box-sizing: border-box;
img {
    width: 100%;
}
&::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #aa5cdb;
    opacity: .5;
}

}