Set table width when pictures are too big

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

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.