I have a set of images, which are full-page screenshots of web pages. They may be very tall.
I want to create an HTML page containing those images, for the purpose of printing out those screenshots.
I want a maximum of one screenshot to appear per printed page. The width of each image should be fixed.
If the image is taller than the printed page, it should be cropped so that only the the top-most region of the screenshot appears. The region discarded by the crop should not be printed at all (i.e. no image should span multiple printed pages).
Is this possible to do with CSS?
Ya can make a print-friendly HTML page fer yer tall screenshots by usin’ some CSS tricks. Use the @media print
rule to make styles jus’ fer printin’. Set the page-break-before
property to always
to ensure each image goes on its own page. Specify a fixed width fer yer images, and set the height to the printed page height. If yer images be taller than the page, they’ll get cropped, and only the top bit will show up. This way, no image spills over multiple pages. Play around with the width, height, and object-fit
properties to get the look ya want.
Give the image a size of
width
andheight
in print units, and then useobject-fit: 100% auto; object-position: 0 0;
?@somethinghere ooh, great idea, thanks! I’ll try it