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>

I'd recommend using flexbox or css grid for this, it can automatically scale based on screen size — Dominik Matis, Aug 15 '19 at 16:44
CSS provides `vw` and `vh`, as in "viewport width" and "viewport height" as units. Check them out here - https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ — Will Alexander, Aug 15 '19 at 20:12

score 1 · Answer 1 · answered Aug 15 '19 at 16:46

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 */
}

score 0 · Accepted Answer · answered Aug 15 '19 at 17:04

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:

Thank you very much, the first few lines did the job amazingly well :) — Pikette O, Aug 21 '19 at 17:28

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

2 Answers2