Image in a li balise html

Question

I wanted to insert an image in my html li tag but my image is out of the tag. I want to put one image into all my tab of menu and that the image adapts to the size of the tab. Some one can help me please ?

This is my code html

<nav class="menu">
    <ul class="inline">
        <li><a href="#">Acceuil<img src="./assets/image/dolphin-logo.png" alt="Commentaire 5" style="border-radius: 5px;"></a></li>
        <li><a href="#">Nous contacter</a></li>
        <li><a href="#">Nos tarifs</a></li>
        <li><a href="#">L'aquarium</a>
            <ul class="list">
                <li><a href="#">ENTRÉE 1</a></li>
                <li><a href="#">ENTRÉE 2</a></li>
                <li><a href="#">ENTRÉE 3</a></li>
            </ul>
        </li>
    </ul>
</nav>

Thank you for your help

I add my css here :

nav.menu ul {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin:0;
    list-style-type: none; 
}

nav.menu ul li {
    width: 250px;
    box-sizing: border-box;
    height: 60px;
    padding:20px 0px;
    background-color: #EEE; 
    text-align: center;
    border: 1px solid black; 
    margin: 20px;
}

nav.menu ul.inline > li {
    float: left;
    /* border-bottom: none; */
}

nav.menu ul.list > li {
    width: 251px;
    float: none;
    border: 1px solid black;
    border-bottom: none;
}

nav.menu ul.list > li:last-child {
    border-bottom: 1px solid black;  
}

nav.menu ul ul {
    display: none;
    position: absolute;
    top: 60px;
    left: 0px;
}


nav.menu ul li:hover > ul {
    display: block;
}

nav.menu ul li:hover {
    background-color: #EFAE00;
}

Answer 1

You can use the image as a background for the tab by using the following CSS:

nav.menu ul.inline > li {
    float: left;
    background-image: url(./assets/image/dolphin-logo.png); /*you might need to change the url*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}