Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal


  • Give kudos
  • Received
  • Given


  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Trying to resize images to page size in CSS for PDF export

My company creates PDFs for our clients, and these PDFs often include large images that can span up to two whole pages. I need help getting these images to automatically resize and appear on one page when I do my exports. 


I have the following set up in the global CSS stylesheet:


/* Keep Img Together */
img {page-break-inside:avoid;}

/* Keep Together */
p {page-break-inside:avoid;}

/* Keep with Next */
.wiki-content h1, .wiki-content h2, .wiki-content h3, .wiki-content h4, .wiki-content h5, .wiki-content h6, .wiki-content h7, .wiki-content h8, .wiki-content h9, .wiki-content h10, .wiki-content h11, .wiki-content h12 {

/* Keep with Previous */
.image-wrap, div.expand-control {page-break-before:avoid;}

/* Keep Table Together */
table {page-break-inside:avoid;}

The unfortunate bit is that the images STILL seem to want to wrap to the next page, if their width allows them to fill out the previous page. I'm wondering if anybody out here has a solution to get the images to stick on a single page, possibly resizing themselves to achieve this effect? Any guidance here is very welcome.



1 answer

Hi Brad, I like your Keep-with-Next solutions for the headings and am looking forward to trying it. I am struggling with getting images to print correctly as well. Some either get cropped or disappear (in a table).

One option that works well, if all you have is large images that are not in a table, is to leave them their original size on the wiki and then add this setting to your PDF Stylesheet:

{ -fs-fit-images-to-width: 100% }


{ -fs-fit-images-to-width: 100% !important; }

Unfortunately, if you have resized other images or have images in tables, some of them get warped or disappear in the PDF output.

These guidelines work best for me:

  • for big images that are not in a table, either resize them to 570px* or less, or do not resize them, even if they are 3000+px;
  • for images in a table, either do not resize or do test runs of your resized images to find the magic number for your graphics. I could not determine a guideline as the results seem random.  

*Pixel settings may vary. My monitor is 27" set to 2048 x 1152 resolution.

Note: If you do not resize the image at all, they should get shrunk to fit either the page or table container when you export to PDF. I found this to be true whether or not I used the fit-to-width setting in my CSS.

Best practice for image quality in print: resize graphics for how they should appear on the printed page before importing them to the wiki. Resizing usually degrades quality. 

There are also macros for printing landscape pages that might help you, but I have not tried them yet. 

Related thread:

 I hope you find a solution. Please share when you do! Good luck!

Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Confluence

Announcing Team Calendars in Confluence Data Center

Hi Community! We're thrilled to share that Team Calendars for Confluence is now a built-in feature for Confluence Data Center releases 7.11 and beyond.  A long time favorite,  Team Cale...

177 views 0 6
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you