CSS media:print - Crop images to page size

Issue

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?

Solution

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.

Answered By - Nithyasarathi