Inserting an image into a table cell in HTML - css

Question

I am finding it difficult in inserting an image into my table cell. When I am trying to completely fill the table cell with an image, The size of the table cell is increasing and taking up the whole page.
Here is my code:
<div id="bar">
<table class = "BarTable" style="width:100%;height: 100%">
<tr>
<td style="width: 35%">
<img src="131AZE.jpg" style="height:100%;width: 100%">
</td>
<td>Everyone</td>
</tr>
</table>
</div>
and the css part is:
#bar {
height:45%;
width: 100%;
}
table.BarTable,th,td {
border:1px solid black;
border-collapse: collapse;
line-height: 0;
}

Answer 1

This is because <table> has a default spacing in cell which we need to clear if not needed.
<table class = "BarTable" style="width:100%;height: 100%" cellpadding="0" cellspacing="0">

Answer 2

You could give the cell with the image the following properties:
width: 1%;
white-space: nowrap;
This will prevent your image from stretching as it does in the code you provided, and the cell will wrap the image perfectly.
Full demo
#bar {
height: 45%;
width: 100%;
}
table.BarTable,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
.myclass {
width: 1%;
white-space: nowrap;
}
<div id="bar">
<table class="BarTable" style="width:100%;height: 100%">
<tr>
<td class="myclass"><img src="http://rs902.pbsrc.com/albums/ac222/jvac/pattern-background.png~c200"></td>
<td>Everyone</td>
</tr>
</table>
</div>

Answer 3

There is a little gap between the image and the border of the cell ¿Is this the problem? only you have set td padding:0
#bar {
height:45%;
width: 100%;
}
table.BarTable,th,td {
border:1px solid black;
border-collapse: collapse;
line-height: 0;
padding:0;
}
<div id="bar">
<table class = "BarTable" style="width:100%;height: 100%">
<tr>
<td style="width: 35%"><img src="http://lorempixel.com/400/200/" style="height: 100%;width: 100%"></td>
<td>Everyone</td>
</tr>
</table>
</div>