Printing Landscape and Fit to Page

HTML & CSS
9

The 90% height on the image has no basis. You need to set html and body to 100% to have something to base the image percentage on.

html,body{height:100%;margin:0;padding:0;}

Also if you are setting the page to landscape:


@page {
	size: A4 landscape;
	max-height:100%;
	max-width:100%
	}

If you then you rotate the image 90 degrees then that will surely bring the image back to portrait? My tests seem to indicate that is exactly what happens on my printer in Chrome.

Note that only Chrome supports the size property. If Chrome is the only browser to support then all you need is:

@media print {
html,body{height:100%;width:100%;margin:0;padding:0;}
 @page {
	size: A4 landscape;
	max-height:100%;
	max-width:100%
	}
   img {
	width:100%;
	height:100%;
	display:block;
	}
}

That will fill the paper in landscape mode fully but the height of the image will be stretched because the aspect ratio will be altered. You would need an image with an aspect ratio closer to the printable page than the one you have which is miles too small.

The height of your image was 400px and the width is 1200px but to maintain a correct aspect ratio the image would need to be around 900px natural height for a 1200px wide image (the page is 8.5 x 11 giving the ratio of width to height at around 1.3 times the width ).

Not sure what you can do for other browsers. Maybe just create a new image in your paint package that is already rotated and has the correct aspect ratios and then just show that image for print. Of course you will have to do that for all browsers as chrome will still rotate it so the size property would need to be removed from the media query.

Printing on the web is very inconsistent and seems to be tacked on as an afterthought and browsers still haven’t caught up. It is therefore best to keep things very simple.

2 Likes