Skip to main content
higgsyd
higgsyd
Inspiring
January 3, 2026
Answered

printing a web page - photo is too large and upside down

  • January 3, 2026
  • 2 replies
  • 179 views

Trying to print this page

Yvonne A Peterson

In the HTML I have added a print.css file to try and reduce the size of the image (little blonde girl, killed in the war)  You will see I have over-ridden the rule  .resp_image_new so as to set the max-width from 800px to 400px.  Unfortunately it still prints full size on the A4 paper.  Also. to my great surprise, it has printed this image (on the second of three pages) upside down!  The first page and the last pagr print the right way up.

your advice wolud be most appreciated

thanks

David

Correct answer L e n a

There are two different points :

First, overriding .resp_image_new in print.css is the right idea, but px units don’t react well to print. A pixel has no real size on paper, so the browser often stretches the image to fit the entire page, especially with width: 100% still set. That’s why the image keeps print full width on the page even with max-width: 400px.

In an other hand, the upside down image is not caused by your CSS rotating anything. This is a known print rendering issue that can happen when images are floated and the page breaks in the middle. When an image span pages, some browsers get wrong. The fact that page 1 and page 3 are fine, and only page 2 is upside down, seams very typical of that.

So to print, the safest approach is to simplify the layout and avoid pixels and floats. give a try to :

@36646830 print {
  .resp_image_new {
    max-width: 10cm;
    width: auto;
  }
  .fltlft_margin_RB {
    float: none;
  }
  img {
    page-break-inside: avoid;
    display: block;
  }
}

2 replies

L
Community Expert
L e n aCommunity Expert
Community Expert
January 4, 2026

Great to hear it worked 🙂
Your testing helped a lot in tracking it down.
Glad it solved the issue.

Best wishes for you too ! 😉

L
Community Expert
L e n aCommunity ExpertCorrect answer
Community Expert
January 3, 2026

There are two different points :

First, overriding .resp_image_new in print.css is the right idea, but px units don’t react well to print. A pixel has no real size on paper, so the browser often stretches the image to fit the entire page, especially with width: 100% still set. That’s why the image keeps print full width on the page even with max-width: 400px.

In an other hand, the upside down image is not caused by your CSS rotating anything. This is a known print rendering issue that can happen when images are floated and the page breaks in the middle. When an image span pages, some browsers get wrong. The fact that page 1 and page 3 are fine, and only page 2 is upside down, seams very typical of that.

So to print, the safest approach is to simplify the layout and avoid pixels and floats. give a try to :

@36646830 print {
  .resp_image_new {
    max-width: 10cm;
    width: auto;
  }
  .fltlft_margin_RB {
    float: none;
  }
  img {
    page-break-inside: avoid;
    display: block;
  }
}
higgsyd
higgsydAuthor
Inspiring
January 4, 2026

Hi Lena

I applied your changes and it works!  What a star you are.  Many thanks for your help

best wishes

David

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices