How to make table with images fit the screen, regardless of screen size?

Question

I created a table in that inside each td has a square image. I set the size of it manually, but my teacher wants it to be in a way that the images will get bigger if the screen is bigger so that it would fit the screen better. The screen should not be scrolled, the table must fit the screen size without any addition.

CSS is okay, I wanted to try using it but I don't really know from where even to start...

https://jsfiddle.net/8Lb1cuqh/1/

<td>
<img style="height:30px;width30px" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
 </td>

Answer 1

You can use this CSS, but you can't hardcode height otherwise the image will be distorted, instead use min-height: or better min-width height will be calculated automatically to keep aspect ratio the same.

table {
    width: 100%;
}
td img {
    width: 100%;
    height: auto; /* this is default */
}

Answer 2

You may give a try to vmin value, so the table doesn't get bigger than the window (if i underrstood right), then reset the table-layout to fixed, so it desn't allow the table to grow wider than the width set. Finally, if image are really big and squared, then , max-width should do.

 table { table-layout:fixed; width:90vmin; } img { max-width:100%; }

 <table align="center"> <tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr> <tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr><tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr><tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr><tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr><tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr><tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr><tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr> </table>

If borders are collapse, then you can also do

 body, td { margin: 0; padding: 0; } table { border-collapse: collapse; table-layout: fixed; width: 100vmin; } img { display: block; max-width: 100%; }

 <table align="center"> <tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr> <tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr> <tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr> <tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr> <tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr> <tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr> <tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr> <tr> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> <td> <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> </td> </tr> </table>

ressource that might be usefull:

• https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

• https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

• Image inside div has extra space below the image