Prevent images overflowing page margin in PDF output

[TheGreatAndPowerfulOz]

Hi, all.

I think I've done a pretty exhaustive search for information on this topic here in the forum, and in the Flare help system, but have come up empty so far...

Here's the situation:

• The content of most of my PDF output is presented in outline form, and some of that content includes screen shots of our application's various screens.
• In general, I try to make the screen shots as narrow as possible since I know I've only got so much horizontal space to deal with in the PDF output (7.5", at the most).
• If a given screen shot happens to be included in the first one or two levels of an outline, there's typically no issue with the image fitting within the margins of the page, but if that same image is in some "deeper" level of the outline, sometimes it will overflow the right margin of the page. In the example below, the red vertical line indicates the right margin of the page:
  
  MarginOverflow.png

I'm quite familiar with the idea of specifying a "max-width" CSS value for images, or by setting a print DPI value for individual images using Capture, but that won't do the trick in this case, since I'm not interested in limiting any given image's width to a specific value or percentage, in general; what I need to do is have any image simply respect the page's right margin and auto-scale down to fit within that limit, as needed (similar to the way text automatically responds to the right margin by wrapping, if it hits that margin).

I understand that this might be asking a lot and perhaps there's really no way to do it, but many of my project images display in various locations/contexts, in both printed and Web output. There are far too many images that fit this description, and I really can't deal with them one-by-one to ensure they display at the appropriate size in whatever context they appear. I'm looking for some way (whether via CSS or in some Flare target setting or something) to just indicate "don't allow any image to overflow the right page margin in printed output".

Any ideas/experience anyone has would be greatly appreciated. Thanks!

[ChoccieMuffin]

I may be barking up the wrong tree in completely the wrong forest, but I thought that if you set the max-width property for your <img> (or, more precisely, all image classes) to 100%, that says that the image can take up a maximum of the width of the container in which it's put. So if the width of your page is, say 7cm and you have a list that indents by 1cm, if you stick an image in a <p> that is inside a <li>, the maximum image width is 6cm.

Feel free to shoot me down.

[TheGreatAndPowerfulOz]

I thought that if you set the max-width property for your <img> (or, more precisely, all image classes) to 100%, that says that the image can take up a maximum of the width of the container in which it's put.

Thanks for your reply, ChoccieMuffin. You've got a really good point, which I hadn't thought of. I know that would work in HTML output, but I'm not so sure that the page border in a PDF document would necessarily act as a "container" in that way (after all, it allows the images to spill over as they are now). I'll give it a shot and report back.

[TheGreatAndPowerfulOz]

I thought that if you set the max-width property for your <img> (or, more precisely, all image classes) to 100%, that says that the image can take up a maximum of the width of the container in which it's put.

Success!! Thanks so much, ChoccieMuffin. Such a simple solution; not sure how I missed this trick!

[matt_lorenzi]

I am struggling with this too.

The Max Width works fine for HTML output, but for PDF target it does not respect the page border. I would think the Frame in the Page Layout would act as a frame, but not for images. Images can and do protrude outside of the Frame dimension.

On a related note, SVG images while they look to behave in the WISIWIG and Preview, when you build the PDF, without fail the SVG images pushes outside of the Frame margin. Frustrating to say the least. I'm not sure using CSS to govern print layout is the best solution here.