自动按字体调整导航大小时，如何使图像大小与导航相同？

Question

我有一个nav栏，其中提供了一些链接。为简便起见，我在下面的代码中仅包含一个链接。该导航栏的高度由链接使用的字体大小自动确定。现在这是我的问题：我想向栏中添加一个img，以填充该栏中的内容，无论它由于链接而变大了。

这是针对移动网站的。现在，我在这个领域可能算是菜鸟了，但我注意到智能手机浏览器对网站的处理方式与缩小桌面浏览器的方式不同。按照这种逻辑，我不想对元素的大小进行硬编码，因为它可能在其他设备上怪异地缩放。如果可能的话，我希望一切都由一个值决定。 我已经读过一些关于display: flex;的内容，但事实是，我不知道它是如何工作的。我尝试将img的高度设置为100%，但是由于nav的高度默认为auto，因此由font-size设置链接无效。

HTML：

<nav>
    <img src="/include/img/logo/flame.svg" alt="info"/>
    <a href="">Link</a>
</nav>

CSS ：（仅包含定位/缩放属性，因此没有颜色等）

nav {
    display: flex;
    padding-left: .5%;
    padding-right: .5%;
}
nav a {
    padding: 10px;
    float: left;
    font-size: 4em;
}

我希望它看起来像this（以像素为单位手动设置图像高度）

但是，当然看起来像this（对不起，还不能发布图片）

（图像下方有一些空白，需要“固定”）

有什么想法吗？我不是唯一一个遇到过此问题的人。