Set table width when pictures are too big - html

Question

I want my table to be with width of 80% of the screen.
The table has one row and 4 columns.
each cell contains one image.
The problem is that the pictures are too big -
I want that their width will be determined by the table width evenly
(each cell will get 20% of the screen)
and such that each picture height will be determined by its width..
How can I do that?

Answer 1

This provides a simple, elegant and fully responsive solution:
HTML:
<table border="1px solid black" width="80%">
<tbody>
<tr>
<td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
<td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
<td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
<td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
</tr>
</tbody>
</table>
See this jsFiddle example
Similarly, see this CSS solution using
td img {
width: 100%
}​

Answer 2

Do something like this:
table { width:80%; }
td { width:25%; }
td img {
width:100%;
height:auto;
}
The width on the image needs to be inheritted from something, so make sure you put some kind of width on the TD. The browser should be able to calculate it since it's a table, but if for some reason you changed to a list markup or something else, you would need a defined width.