title: Is there a CSS way to scale an image to fill available space between two other block-level elements on an A4 page?
body: <p>I'm attempting to generate a series of pages to be printed on A4, using information that varies from record to record. Each record is to be printed on one page.</p>
  
  <p>Each page should have the following layout (mockup not to scale):</p>
  
  <p><a href="https://i.stack.imgur.com/67MiG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/67MiG.png" alt="Layout mockup"></a></p>
  
  <ul>
  <li>The header is of fixed size for each record.</li>
  <li>The central image may be of any size and aspect ratio and should scale to fit the available space.</li>
  <li>The data rows in the footer at the bottom may be of any number, but one can assume they will not fill the entire page. (It would be acceptable to scale their containing table to fit a specific proportion of the page, say 25%, if it was necessary to do so to allow the image to be scaled.)</li>
  </ul>
  
  <p>This feels as if it should be relatively simple to achieve, but as yet, I hve not been able to do so with pure CSS. Is there a simple solution that I am overlooking? Otherwise, is JS necessary?</p>
  
  <p>An acceptable solution would be one that conforms to the 210:297 ratio without enforcing width and height of 210mm and 297mm - once it is in the right ratio, the scaling to fit an A4 page could be left to the browser's printing facility.</p>