Images are getting resized in Print Preview

Question

I have several images(not background images) on my webpage, When I see the Print Preview at 100% scale, images looks fine, but My problem is that when I do a print prview with Shrink to fit scale, all the images are coming smaller than the actual size. I have not supplied any width or height attribute on IMG tag so I assume that in print preview it will load as they appear on screen. I have used below css for print media for IMG but it did not work

img {max-width:100%; }

I am expecting the same image dimension in Shrink to fit and 100% scale.

Is this possible? am I missing something in print css? Please advice.

Answer 1

While working on my project, when I needed to get the original size of image in print preview, I had to use !important. Otherwise, it wouldn't overwrite the style defined initially for the image on the page.

I also had to modify the height of image containers:

@media print {
      .logo-container,
      .img-wrapper,
      img {
        max-height: none !important;
        height: 100% !important;
}

Answer 2

Do you have your images inside 'container' or 'div' etc? you should create print style for them also not just for the img elements.

I would suggest to use the same style on your elements both for screen and print , like so(this is my print.css):

/*How they look like on the print preview*/
@media print {
    #poweredbyLogo{
        width:213px;
    }
    #logoframe{
        height:80px;
        margin-top:6px;
    }

    .space{
        padding-left:20px;
    }

    .col-md-6.a1{
        background-color: #0000f6!important;
    }
    .col-md-6.a2{
        background-color: #d3d3d3!important;
    }
}
/*How they look like on the screen*/
@media screen {
    #poweredbyLogo{
        width:47%;
    }

    #logoframe{
        height:80px;
        margin-top:6px;
    }

    .space{
        padding-left:20px;
    }
}

Hope helps, good luck.