3

I have an angular modal that loads up shipping label images that I need to print.

The issue I am having currently is that certain images are 4x6 landscape and some are 4x6 portrait.

Thus, while trying to print them out on a 4x6 paper, it gets messed up because currently this is my css :

   @media print{
       @page{ 

       size: 4in 6in;
       margin:auto;
       margin-left: 0px;
       margin-right: 0px;
       margin-top: 0px;
       margin-bottom: 5px;
       padding-top:10px;  
}
}

So - any portrait image prints fine but landscape image I print has this extra white space below.

I made the following addition - 

@media print{
       @page{ 

   size: landscape;
   size: 4in 6in;
   margin:auto;
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 0px;
   margin-bottom: 10px;
   padding-top:10px;  
}
}

Which fixes the landscape issue , but my portrait images don't show up correctly.

Is there a way I could assign two different conditions for landscape and for portrait so that both types of the images could be printed fine?

221b
  • 431
  • 1
  • 11
  • 34
  • 1
    One simple "hack" would be to use your existing print CSS without any modifications and simply rotate the landscape images using `transform: rotate(90deg);`. The only downside is that viewing on-screen will be a bit difficult, but the printed version will be just fine. – alesc Jan 05 '17 at 17:25
  • So should that be added within @page ? – 221b Jan 05 '17 at 18:00
  • Also - does that mean that the print preview will not show any changes? Just want to make sure before I go ahead and print – 221b Jan 05 '17 at 18:15
  • Please, see the answer http://stackoverflow.com/a/44069821/632199 – Denis May 19 '17 at 12:18

0 Answers0