Menue mit individuellen Menuebildern

First – you don’t need the custom link – if these Menupoints are real links.
just open the menu-item at that littel arrow on the right. And on Navigation Label you can insert Ricards Code.

If you got a link to your page – it is much easier to give any advice.

i gave to those menu-items a custom-class : bildlink
(if you have all menu links like this – get rid of that bildlink in the code)
(if not : you know how to give a custom class to menu-items?)

then to quick css:

.bildlink .avia-menu-text {
    line-height: 20px;
    vertical-align: top;
}

.bildlink.menu-item img {
    display: block;
    width: auto !important;
    height: 50%;
    position: relative;
}

we had to find then a solution for the hamburger menu too – but with link it will be easier

without a link i’m out here.
It could be all (including line-height) Sorry

And i think there will be no good way with a shrinking header

last speculation:

.bildlink.menu-item {
    overflow: visible !important;
}

.bildlink a {
    line-height: 10px !important;
    overflow: visible !important;
    text-align: center !important;
}

.bildlink.menu-item img {
    display: block;
    width: auto !important;
    height: 50%;
    position: relative;
    margin: 0 auto;
}

.bildlink .avia-menu-text {
    line-height: 20px;
    vertical-align: top;
}