title: Scale HTML to fit one page when printing
body: <p>I have a Web page with a diagram that is meant to be fixed in size to <code>width:1660px;height:480px;</code> using CSS. The page (am I allowed to link to it?) displays properly in the browser, but when printing in Google Chrome (I haven't tested other browsers yet), it is too big horizontally to fit in a single page. How do I scale the HTML to fit one printed page?</p>
  
  <p>Here's what the output might look like (Firefox 60):</p>
  
  <p><a href="https://i.stack.imgur.com/cFcRF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cFcRF.png" alt="enter image description here"></a></p>
  
  <p>I have tried messing around with media queries such as this:</p>
  
  <pre><code>@media print
  {
      @page
      {
          size: 297mm 210mm; /* landscape */
          /* you can also specify margins here: */
          margin: 250mm;
          margin-right: 450mm; /* for compatibility with both A4 and Letter */
      }
  }
  </code></pre>
  
  <p>But I cannot notice any effect in the print preview.</p>
  
  <p>[edit]</p>
  
  <p>Internet Explorer 11 seems to be able to scale the page automatically in the print dialog. I don't know why Google Chrome can't do this as well.</p>
  
  <p>[edit]</p>
  
  <p>I tried transforming the page too. However the printed result is very different in Chrome vs IE11.</p>
  
  <pre><code>@media print
  {
      html
      {
          transform: scale(0.5);transform-origin: 0 0;
      }
  }
  </code></pre>
  
  <p>Next, I tried zooming the page. This worked pretty well, but I don't know if it only affects Chrome or if it affects IE and Firefox as well.</p>
  
  <pre><code>@media print
  {
      html
      {
          zoom: 50%;
      }
  }
  </code></pre>
  
  <p>In either case, there's no way for the user to disable the effect when using CSS, unless you create new JavaScript controls too.</p>