Table 100% width and height, and image to scale proportionally with css

Question

The background to this question is i'm using a html to image converter and using html as a kind of template.

My requirements is i need to produce layouts that are 100% of the browser height and width, can scale a main image to the available space proportionally in css, and switch off certain images and text

My problem is i cant get the main image to scale and fill the remaining space proportionally .

I have a more complete example here jsFiddle

HTML

<table>
<thead><tr>
    <td><img class="header_image" src="some.jpg" /></td>
    <td><img class="header_image" src="some.jpg" /></td>
</tr></thead>
<tfoot><tr>
    <td colspan="2"> <span class="text">some text</span></td>
</tr>/tfoot>
<tbody><tr>
    <td colspan="2">
        <img class="main_image" src="main.jpg">
    </td>
</tr></tbody>
</table>

CSS

 html,body,table {
  margin: 0;
  text-align: center;
  height: 100%;
  width: 100%;
}

.text {
  font-size: 50px;
  font-family: sans-serif;
  letter-spacing: -4px;
  margin: 0 20px;
}

.main_image {
  max-width: 100%;
  max-height: 100%;
}

.header_image {
  width: auto;
  max-width: 100%;
  border: 1px solid black;
  height: auto;
  height: 100px;
}

Answer 1

if image is set in absolute position , html table or flex box would do the job:

• table

 html, body, table { height: 100%; width: 100%; margin: 0; background-color: rgb(148, 0, 211); text-align: center; /* for table */ table-layout: fixed; border-collapse: collapse; } td { padding: 10px; } td.hide {/* do not remove or remove/update also colspan attribute else where */ width: 0; padding:0; overflow: hidden; } img { display: block;/* for the gap*/ margin: auto; } .header_image { height: 100px;/* your example */ } thead tr td, tfoot tr td { height: 0;/* no worry it will expand */ } tbody { position: relative; /* also uses height left avalaible */ } .main_image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-height: 100%; max-width: 100%; } .text { font-size: 50px; font-family: sans-serif; letter-spacing: -4px; margin: 0 20px; } 

 <table> <thead> <tr> <td class="hide"><img class="header_image" src="https://dummyimage.com/400" /></td> <td><img class="header_image" src="https://dummyimage.com/2254x1860" /></td> </tr> </thead> <tfoot> <tr> <td colspan="2"> <span class="text">some text</span></td> </tr> </tfoot> <tbody> <tr> <td colspan="2"> <img class="main_image" src="https://dummyimage.com/1600"> </td> </tr> </tbody> </table> 

• flex

 html, body { margin: 0; text-align: center; height: 100%; width: 100%; background-color: rgb(148, 0, 211); display: flex; flex-flow: column; } header,main,footer { padding:10px; } footer { order: 2;/* in case before main in html */ } main { flex: 1;/* use whole space avalaible*/ position:relative; } .hide { display: none; } .text { font-size: 50px; font-family: sans-serif; letter-spacing: -4px; margin: 0 20px; } .main_image { max-height:100%; max-width:100%; margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; } .header_image { max-width: 100%; border: 1px solid black; margin: auto; height: 100px; } 

 <header> <div class="hide"><img class="header_image" src="https://dummyimage.com/400" /></div> <div><img class="header_image" src="https://dummyimage.com/2254x1860" /></div> </header> <!--<footer> <span class="text">layed &amp; and pinned with flexbox</span></footer>-- NOP not here --> <main> <img class="main_image" src="https://dummyimage.com/1600"> </main> <footer> <span class="text">layed &amp; and pinned with flexbox</span></footer>