How to fit HTML table images to window height?

Question

First of all, my idea is to create my site with portfolio images auto-fit to browser window height. I'm not an expert in html code, but I think I'm very close to what I want to looks like.

HERE is my problem: http://www.stelianpopa.ro/photo-outdoor.html

CSS:

table{
height: 100% !important;
border-collapse:collapse;
border-spacing:1px;
position: absolute;
z-index: -100;
}

table td{
width: 100% !important;
position: relative;
vertical-align: middle;
}

table td img {
height: 100% !important;
margin-right: 5px;
}

HTML:

<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://www.stelianpopa.ro/uploads/series/ld0.jpg"></td>
<td><img src="http://www.stelianpopa.ro/uploads/series/ld0.jpg"></td>
<td><img src="http://www.stelianpopa.ro/uploads/series/ld0.jpg"></td>
</tr>
</table>

Right now the code seems to work only IF YOU ENTER FIRST TIME in the gallery, if you refreh or enter again the code crash and images are height fit but overlapping.

PLEASE HELP ME to corect the code and the images not the overlapping when you refresh the page. PS: The codes are tested in Chrome, In other browsers doesn't work at all, they don't resize... why?

Answer 1

I have some recommendations. Lose the use of tables.

<ul>
    <li><img src="http://www.stelianpopa.ro/uploads/series/ld0.jpg"></li>
    <li><img src="http://www.stelianpopa.ro/uploads/series/ld0.jpg"></li>
    <li><img src="http://www.stelianpopa.ro/uploads/series/ld0.jpg"></li>
</ul>

Then in your CSS the important factor for 100% height is every parent must also utilize 100%, this includes html and body.

html,body {
    height: 100%;
}
ul {
    white-space: nowrap; /* stops li elements from wrapping to next line */
    height: 100%;
}
li {
    list-style: none; /* just to remove dotted list */
    height: 100%;
    display: inline; /* makes list elements horizontal */
}
img {
    height:100%;
}

Here is a jsfiddle: http://jsfiddle.net/wboco/VRYWg/1/

* Why was this marked correctly then removed?

Remove:

<div class="single-img">    
<div id="gallery">

from wrapping the unordered list on your site. Then add the CSS to ul li and img that I provided earlier. It's 100% functional.

Answer 2

To fit an element entire height of the page, you need to set height of all prior elements.

So, try this CSS:

html, body { height: 95% }

And set the height of other elements containing your table, if there.

Answer 3

First set your <div class="space"></div> height to 0px. Change your img tag to div and set background image.

<div class="single-img">    
   <table cellpadding="0" cellspacing="0"style='width:100%!important;height:100%!important;'>
      <tbody>
         <tr>
           <td style='width:100%!important;height:100%!important;'> 
           <div style='width:100%!important;height:100%!important; background-image:url(image1);' ></div>
           </td>           
          </tr>
           <!-- another images  ...  -->
      </tbody>
    </table>
</div>