Resize images for table cells in HTML/CSS

Question

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 themselves. Can't figure it out. Thank you for your answers.

Answer 1

Use max-width: 100%; in place of width.

Further add max-height: 100%; to prevent the mage from changing the aspect ration of the image(for exact image viewing experience)

and also add full width to the table

#menuBar{
    padding: 5%;
  height:90%;
  width:90%;
}

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

#menuBar{
    padding: 5%;
  height:90%;
  width:90%;
}

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

<nav>
    <table id="menuBar">
            <tr>
                <td> <img src="https://i.sstatic.net/Cgm7x.jpg?s=328&g=1"> </td>
                <td> <img src="https://i.sstatic.net/Cgm7x.jpg?s=328&g=1"> </td>
                <td> Files </td>
                <td> Comments </td>
            </tr>
        </table>  
</nav>

but would recommend to use div in these situations which works best for responsive designs

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

#menuBar{
  height:100%;
  width:100%;
}

#menuBar div{
  float:left;
    height: 100%;
  margin:0 auto;
}

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

<nav>
    <div id="menuBar">
            <div> <img src="https://i.sstatic.net/Cgm7x.jpg?s=328&g=1"> </div>
                <div> <img src="https://i.sstatic.net/Cgm7x.jpg?s=328&g=1"> </div>
                <div> Files </div>
                <div> Comments </div>
        </div>  
</nav>