在我的导航栏中添加一个PNG徽标，它从上到下流动

Question

我试着在导航栏中添加一个徽标，但每当我将徽标添加到代码中时，它都会弄乱导航栏本身的填充，并扩展到足够的空间，使其可以在上面没有重叠，这正是我所需的任务。我需要添加一个png徽标，比我的导航栏大，并且为了使徽标从导航栏的顶部和底部重叠，png徽标只是一个没有背景的简单叶子。

这是一张显示我的结果和所需结果的图片

.menu {
text-align: left;
background-image: url("navigation-background.jpg");
}
.menu ul{
display: inline-flex;
list-style: none;
color: maroon;
}
.menu ul li{
margin: 0;
padding-left: 10px;
padding-right: 10px;
display:inline;
text-align: center;

}
.menu ul li a{
text-decoration: none;
color: white;
display: flex;
}
.menu ul li img{
display: flow;
}

<div class="menu">
<ul>
<li><img src="leaf.png" style="width: 40px;height: auto;"></li>
<li>
<a href="index.html">Дома</a>
</li>
<li>
<a href="servisi.html">Сервиси</a>
</li>
<li>
<a href="zanas.html">Зa нас</a>
</li>
<li>
<a href="kontakt.html">Контакт</a>
</li>
<li>
<a href="najava.html">Најава</a>
</li>

</ul>
</div>

当涉及到我的代码时，任何意见/提示都是受欢迎的，我是一个完全的新手，所以很容易接受。谢谢

Answer 1

您应该调整：

style="width:40px;height:auto;

将高度从40递增，并检查是否正常