CODEWITHSUNDEEP
htmlcsshtml-table
celevra
celevra

Reputation: 25

scale table in width and height

i've got a table 3x3 with Images in it. I want the table to scale with the windows width and height.

scaleing with the width is not a problem and working so far, but i don't get it working with the height. The aim is to see the whole table with no gaps between the images. Also the table should stop growing if the images are at 100% so no forced 100%. is this possible in CSS only?

thanks for your help

that is what i got so far:

  <head>
    <style>
      * { margin: 0;padding: 0; line-height: 0;}
      html, body
      {
        height: 100%;
      }
      #imgHolder {
        max-width:100%;
        max-height:100%;
        height: auto;
        width:auto;
        border-collapse: collapse;
      }
      img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <table id="imgHolder">
      <tr>
        <td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td>
      </tr>
      <tr>
        <td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td>
      </tr>
      <tr>
        <td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td>
      </tr>
    </table>
  </body>

here is a fiddle: https://jsfiddle.net/xhaqzzkj/

Upvotes: 1

Views: 3762

Answers (1)

nonopolarity
nonopolarity

Reputation: 150986

To do window height, use viewport height vh, such as 100vh or 98vh:

and use calc() with it, such as calc(100vh - 16px), assuming you are using a modern browser.

Since you also have this requirement:

Also the table should stop growing if the images are at 100% so no forced 100%

Do you mean if the images are not that big, don't force them to become big just to make the table 100% of viewport width and height?

If so it seems like you can have a table that contains these images, but have a max-width and max-height as 100vw and 100vh, respectively.

Or you can make the td and images have max-width: 33vw and max-height: 33vh like the following samples: https://jsfiddle.net/xhaqzzkj/7 and https://jsfiddle.net/xhaqzzkj/8

Upvotes: 1

Related Questions