How do I insert an image inside a <li> tag widthout getting the height of the <li> tag changed?

Question

I have this mobile menu:

As you can see, the <li> tags with the image make the bottom expand a little bit, while "Boxing" which doesn't have any image inside the <li> tag doesn't. I tried " height: 27px " to the <li> tag. worked perfect. the problem is that when clicking the image - a submenu opens inside the <li> - when defining the height it doesn't expand.

This is how the html list item looks like:

                <ul class="sports">
                    <a href="#" >
                        <li url="http://google.com">NFL
                            <img src="strokesmenu.jpg"   id="sub-menu" />
                            <ul class="sports2">
                                <a href="#" class="selected">
                                    <li>Superbowl</li>
                                </a>
                            </ul>
                        </li>
                    </a>

// one without an image: 

                    <a href="#"><li> Boxing</li></a>

and this is my css:

.sports li{
    list-style-image:none;
    list-style-type: none;
    border-bottom: 2px solid #eeeeee;
    margin-bottom: 0px; 
    margin-left: 0px; 
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
    width:100%;
    font-family: arial;
    text-decoration: none;
    overflow: hidden;
    /*height: 27px;*/
    z-index: 100;
}

Answer 1

Give Max-height to the image that way it will not get bigger tha tthe li

li > img{
max-height:100%;
}

i hope it works