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

Brad Bond

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 {
page-break-after:avoid;}

/* 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.

 

Brad

Christine Diamond_wawsat

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:

.confluence-embedded-image
{ -fs-fit-images-to-width: 100% }

or

.confluence-embedded-image
{ -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:  https://community.atlassian.com/t5/Confluence-questions/images-with-100-width-in-PDF-export/qaq-p/375808

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