Landscape - Portrait set print page orientation using CSS

Question

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?