Resize images for table cells in HTML/CSS

I have a code like this:

HTML:

<nav>
    <table id="menuBar">
            <tr>
                <td> <img src="data/Sources/menu.png"> </td>
                <td> <img src="data/Sources/home.png"> </td>
                <td> Files </td>
                <td> Comments </td>
            </tr>
        </table>  
</nav>

CSS:

nav {
    text-align: center;
    height: 100px;
    width: 100%;
    padding-left: 25%;
    padding-right: 25%;
    background-color: #7F7F7F;
}

#menuBar{
    padding: 5%;
}

#menuBar img{
    width: 100%;
    height: auto;
    display: block;
}

and I want to fit the pictures into the cells. But the pictures are bigger than the cells, and they are resizing the table instead of resizing the images itselves. Cant figure it out. Thank you for your answers.