较小的图像div在打印预览（Divception）中的容器div内缩小

Question

I have a div that holds a number of smaller divs. These smaller divs are used for displaying pictures... Not sure what the best way of explaining it is, so I'll add a couple of images

Anyways, in the design view, I have the divs looking perfectly, or at least near perfectly like the example above. Everything is lined up so it looks even with whatever element. However...

When I go to Print view, the pictures divs shrink in size. A lot of the time it isn't by much, almost barely noticable, but its enough to throw the layout off. I have tried this on both Chrome and Firefox, and I have downloaded it an opened it in Adobe; every time it comes out the same way. I've thrown everything I can think of at this but haven't been able to figure out why its happening.

Here's the css in regards to the larger div:

.image-grid{width:274mm;height:99.5mm;padding:3mm 0 0 7mm;}
    .image{width:34.5mm;height:20mm;background-repeat:no-repeat;background-position:center center;background-size:cover;margin-right:2.99mm;margin-bottom:3mm;float:left;padding:0;}
    .image-end{width:34.5mm;height:20mm;float:left;background-repeat:no-repeat;background-position:center center;background-size:cover;padding:0;}
.mkt-drop-zone{background-repeat:no-repeat !important;background-position: center center !important;z-index: 1;}

And here's the HTML for one of the rows:

<div class="image-grid">
    <div class="image mkt-drop-zone" style="background-image:url('<?php echo empty( $data['content_images'][0] ) ? $data['no_image'] : $data['content_images'][0]; ?>');"></div>
    <div class="image mkt-drop-zone" style="background-image:url('<?php echo empty( $data['content_images'][1] ) ? $data['no_image'] : $data['content_images'][1]; ?>');"></div>
    <div class="image mkt-drop-zone" style="background-image:url('<?php echo empty( $data['content_images'][2] ) ? $data['no_image'] : $data['content_images'][2]; ?>');"></div>
    <div class="image mkt-drop-zone" style="background-image:url('<?php echo empty( $data['content_images'][3] ) ? $data['no_image'] : $data['content_images'][3]; ?>');"></div>
    <div class="image mkt-drop-zone" style="background-image:url('<?php echo empty( $data['content_images'][4] ) ? $data['no_image'] : $data['content_images'][4]; ?>');"></div>
    <div class="image mkt-drop-zone" style="background-image:url('<?php echo empty( $data['content_images'][5] ) ? $data['no_image'] : $data['content_images'][5]; ?>');"></div>
    <div class="image-end mkt-drop-zone" style="background-image:url('<?php echo empty( $data['content_images'][6] ) ? $data['no_image'] : $data['content_images'][6]; ?>');"></div>
    <div class="clear"></div>

Answer 1

Without seeing code the best you will get are educated guesses, so here is mine:

Somewhere, you have a CSS rule under the media query @media screen or @media print. In the first case, the style is getting applied only for the page when viewed in the browser, when it is getting printed, the rule is not getting applied. In the second case, the rule is NOT being applied when viewed in the browser, but is being applied when printing.