Use CSS to scale all images for print output?

[beagley]

I want to shrink all of my images for print output while leaving them full-size for WebHelp output.

I've tried setting the width and height in the stylesheet of my "mediaobject" <div> that I use to contains all my images. But when I set those attributes to a percentage (or a pixel amount), it just changes the size of the block element, producing some amusing results sometimes. The image (a png) remains the same size.

Similarly, setting the width attribute of the <img> element seems to have no effect.

Is there any way to automatically shrink all of my images for PDF output, while leaving them full size for screen output?

As I have thousands of images, I really don't want to insert all of them twice and use conditionals. That would be awful to work with.

[SteveS]

If you are using Capture you can set the print dpi differently to the 'normal' resolution.

This will shrink the size of the image when it is sent to pdf (or Word, for that matter).

Not sure if this is what you want...

... but I'll suggest it anyway

[LTinker68]

You want to apply the height and width settings to the <img> tag in the print medium. Setting it on the <div> tag just changes the size of the container DIV tag, which won't affect the size of the image because the default behavior for DIVs is to overflow the DIV if the contents can't fit within the DIV.

Unless your images are all exactly the same size, I recommend using percents on the width and height instead of using points or inches. If you're worried more about width than height or vice versa, then set the size on just one of those properties -- the other property will adjust accordingly. If you only want the image to scale if the image is larger than a certain size, then use the max-height or max-width property (again, using just one) instead of the usual height or width property. If you use max-height or max-width, then I'd use inches (e.g., max-width:6in).

NOTE: You'll have to test that in Word. I think Word recognizes using the width or height property, but I can't remember if it knows how to use max-height or max-width.

[beagley]

You want to apply the height and width settings to the <img> tag in the print medium... Unless your images are all exactly the same size, I recommend using percents on the width and height instead of using points or inches.

Lisa,
I have done exactly as you suggest, setting the width attribute of my <img> to 70%.

There is no effect on my PDF target.

Any thoughts?
-d

[LTinker68]

Try using the max-width property set to inches. Seems like I tried that and it worked, although I can't remember where I implemented it (which project) so I can't remember where to go look to retest it.

[beagley]

The max-width will indeed scale all images down to a certain size OR a certain percentage of the enclosing element.

Unforunately, I want to scale all images to 50% of their original size in the PDF.

I'm trying to find a way to do that with CSS (or elsewhere in Flare).

[LTinker68]

I wonder what happens if you set min-width:50% and max-width:50%? Or are you saying percentages don't work at all when sending to PDF?

[doc_guy]

As was stated earlier, this is specifically what MadCap Capture does really well. It lets you create one group of settings for print output and one group of settings for WebHelp output. It is phenomenal in what it does well. It still has some eccentricities that don't work as well as Snagit, but overall, I find that Capture is indispensable to my projects.

[beagley]

I guess I will try to demo Capture.

I have several thousand images prepped and ready to be used in my project. To have to someone run/open them all in Capture is a depressing option...

Le sigh.

-d