如何将 img 转换为链接并让 <a> 标记为其包含的图像的高度

Question

这是我的html：

<a id="test" href="monogram/index.html">
        <img src="img/MonogramApartmentNS.png" alt="The image">
</a>

这是CSS：

#test {
  display: inline-block;
  width: 40.0rem;
}

#test img {
  width: 100%;
}

图像链接有效。在 css 中，我将 设定为显示为内联块，但 的高度与 img 的高度不匹配。它比它包含的图像高 5 像素。我如何获得与它包含的图像完全相同的高度？我需要这个，因为我在标签周围使用边框。

几张图片：

Answer 1

问题出在图像上，使得图像显示：block；应该修复它。