Pikette O
Pikette O

Reputation: 25

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

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>

Upvotes: 1

Views: 99

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106078

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:

Upvotes: 0

jcubic
jcubic

Reputation: 66660

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

Upvotes: 1

Related Questions