Image in menu at 100% height?

Question

css

There is navigation on the site with a fixed width.
Looks like that:

<div class="menu">
  <ul>
    <li><a href="#"><img src="img/1.png">Главная</a></li>
    <li><a href="#"><img src="img/2.png">Ссылка</a></li>
    <li><a href="#"><img src="img/3.png">Ссылка</a></li>
    <li><a href="#"><img src="img/4.png">Ссылка</a></li>
    <li><a href="#"><img src="img/5.png">Ссылка переносится на вторую строку</a></li>
    <li><a href="#"><img src="img/6.png">Ссылка</a></li>
  </ul>
</div>

The fifth link, due to the long text, is transferred to the second line and is located under the picture.
Is it possible to make the text wrap but not under the image. That is, the area with the picture occupied 100% of the height space?!
PS The method with pictures in background via css is not suitable.

Answer 1

.menu ul li a {
  display: flex;
  align-items: center;
}
.menu ul li a img {
  flex-shrink: 0;
  margin-right: 10px;
}

like so, if you need the picture to stretch, you can add

.menu ul li a img {
  align-self: stretch;
}

but I think this is not necessary, because. stretched picture does not look very good.
If you want the text to be level with the picture, and not centered, then

.menu ul li a {
  display: flex;
  align-items: baseline;
}

Answer 2

ul{display:grid; grid-template-columns:50px 1fr; list-style-type:none; align-items:center;}
li{background-size: auto 100%;}
li:nth-child(1) {background:url(img/1.png) left center no-repeat ; padding-left:50px;}
li:nth-child(2) {background:url(img/2.png) left center no-repeat ; padding-left:50px;}
li:nth-child(3) {background:url(img/3.png) left center no-repeat ; padding-left:50px;}
li:nth-child(4) {background:url(img/4.png) left center no-repeat ; padding-left:50px;}
li:nth-child(5) {background:url(img/5.png) left center no-repeat ; padding-left:50px;}
li:nth-child(6) {background:url(img/6.png) left center no-repeat ; padding-left:50px;}