Images are getting resized in Print Preview

html css print-css
Kalish picture Kalish · Oct 4, 2012 · Viewed 11.4k times · Source

I have several images(not background images) on my webpage, When I see the Print Preview at 100% scale, images looks fine, but My problem is that when I do a print prview with Shrink to fit scale, all the images are coming smaller than the actual size. I have not supplied any width or height attribute on IMG tag so I assume that in print preview it will load as they appear on screen. I have used below css for print media for IMG but it did not work

img {max-width:100%; }

I am expecting the same image dimension in Shrink to fit and 100% scale.

Is this possible? am I missing something in print css? Please advice.

Answer

bakrall picture bakrall · May 16, 2019

While working on my project, when I needed to get the original size of image in print preview, I had to use !important. Otherwise, it wouldn't overwrite the style defined initially for the image on the page.

I also had to modify the height of image containers:

@media print {
      .logo-container,
      .img-wrapper,
      img {
        max-height: none !important;
        height: 100% !important;
}

Related questions

How to make HTML pages print at a consistent size from Chrome?

I'm designing a set of HTML pages to be printed, and I want elements of the pages to end up the same scale as each other. For example, there's a class of div whose width is defined as 200px wide …

Read More
Print table footer at the very bottom on last page

I am using a table to create a footer on every page (works in Firefox, that's enough). A JS Fiddle: https://jsfiddle.net/j9k2xzze/ (right click on the output pane -> This Frame -> Open Frame …

Read More
How to make page border in print CSS for every single page

I have a long HTML to print. Page is ready for printing but I need to border every single page. I added body { border:2px #666 solid; padding:5px; } in CSS code. HTML view is nice but print view is not. …

Read More