title: Google Chrome printing images in low resolution
body: <p>I have a page with some images. They are resized with CSS. Here is how:</p>
  
  <pre><code>@media print {
  
  .img-thumbnail {
    width: 45vw;
    height: auto !important;
    min-height: auto;
    max-height: 100vh;
    margin-top: 0.5em;
    display: block;
    page-break-inside: avoid;
    filter: grayscale(100%);
  }
  </code></pre>
  
  <p>It looks perfect on the screen, but when I actually print or export them to PDF from Chrome, the result is this:</p>
  
  <p><a href="https://i.stack.imgur.com/YUZPk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YUZPk.png" alt="A low resolution piece of crap"></a></p>
  
  <p>Whereas if I print it from Firefox...</p>
  
  <p><a href="https://i.stack.imgur.com/UQJ10.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UQJ10.png" alt="enter image description here"></a></p>
  
  <p>Clearly something is wrong in how Chrome exports images to the print spool. It looks fine in the print preview window, but it gets downscaled. Has anyone met this problem yet?</p>