How can I get the code below to print the image to fill (stretch/squeeze/enlarge) an 8 1/2 by 11" page. If I have to do it manually (make the image a certain pixel size) would it print the same on most printers?
When you say “fill” the page, presumably you only mean width-wise? The aspect ratio of the image is such that you won’t be able to stretch it in both directions without distorting it badly.
I forgot to say that the AR doesn’t matter because the images I’ll be using aren’t much different than the AR of 8 1/2 by 11 paper (which is 1.3)
Sorry - I was going by the “1200x400.jpg” and assuming the size would be 1200px x 400px.
Out of interest, what size are the images you’re using? Most browsers have a “shrink to fit” option for printing content which is too large. Trying to stretch a small image to fit the page will give a very poor and grainy effect.
Like @TechnoBear is saying, you better be sure of the dimensions of ALL images. If you do that, you can do something like this. You’ll probably need to use max-height and/or max-width as well…
@media print {
@page {size: A4 landscape; }
/* use width if in portrait (use the smaller size to try
and prevent image from overflowing page... */
img { height: 90%; margin: 0; padding: 0; }
}
The image sizes include 1000 x 670, 900 x 600.
I was giving the 1200 by 400 to indicate the reason for why I have the image turned 90 degrees (so then long side of the image will be printed on the long side if the paper.
I read somewhere that FF doesn’t see page size or maybe its size:landscape that it doesn’t see.
I wasn’t ablem to get vDav’s code to rotate
@media print {-webkit-transform: rotate(-90deg) scale(.68,.68);
-moz-transform:rotate(-90deg) scale(.58,.58)
@page {size: A4 landscape);
-moz-transform:rotate(-90deg) scale(.58,.58)}
/* use width if in portrait (use the smaller size to try
and prevent image from overflowing page... */
img { height: 90%; margin: 0; padding: 0; }
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:
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.
Add to that that there are many different paper sizes, many different printer models, and that both the printer and the browser can be configured differently and the hope of achieving anything close to 100% consistency is near impossible.
A website can not know what paper size or printer a visitor may have.
Nor can it hijack a users browsers print settings.
eg. if a user wants the page title and the date to be printed in a 1 inch top margin, it will be. There are no print style CSS rules to control that.
True, some assumptions can be made based on the target audience.
eg. A4 8.5 x 11 is common in the US and most users probably haven’t changed the default margin settings in their browsers print settings.
The north American standard paper size is the US Letter: 8.5 x 11 inches or 216 x 297 mm.
The rest of the world standard paper size is the ISO A4: 210 x 297 mm or 8.27 x 11.7 inches.
As @Mittineague says, the US Letter size is the default in (all) printer drivers and most word processors, even when meant for e.g. European languages and other markets.