So I've got a page that shows an image with some absolutely positioned text on top of it.

I want to write a print style sheet for it so that:

  1. the image is resized to fit the width of the page
  2. the text is repositioned and resized to maintain relative position and size with the image behind it

So I know I can do (1) with just max-width: 100%, but I'm not sure how to accomplish (2). I'm okay with using some javascript if necessary, but I wanted to know if there's a way to do this in pure CSS. If I do need to use javascript, what can I hook to check for the pixel width of the image in the printed page? Just use the calculated width as normal?

As it stands, it prints like so:

1 answer

This was chosen as the best answer

set overflow: none rather than overflow:auto

Answered about 9 years ago by Noah Luck Easterly