Chrome Print CSS image not resizing

Question

I have a basic setup to center an oversized image in it's container. It works perfectly except when you try and print Chrome (Printing in FF and IE works as expected). Instead, Chrome's print preview will not resize the image at all.

Annoyingly I am unable to recreate the problem, so I hope someone might be able to suggest something it could be?

This is the basic setup: https://jsfiddle.net/aed2gh3w/

<style>
.container {
  position:relative;
  width:20%;
  padding-bottom:20%;
  border:1px solid red;
  margin:0 auto;

}

.align {
  position:absolute;
  left:50%;
  margin:0 -400px;
  top:0;
  width:800px;
  height:100%;
  border:none;
  text-align:center;
}

img {
  vertical-align:top;
  height:100%;
  width:auto;
}

</style>
<div class="container">
  <div class="align">
    <img src="http://placehold.it/400x300">
  </div>
</div>

@paolo.basso99 I am unable to replicate the problem outside my full code, so I am looking for suggestions to what might be causing it? — user500665, Oct 31 '16 at 23:53
Any chance that this solution might work for you? http://stackoverflow.com/questions/25396682/window-with-image-print-issue-in-chrome — react_or_angluar, Nov 01 '16 at 00:00
@user500665 You could post your full code then, as paolo mentioned if you go to https://jsfiddle.net/aed2gh3w/embedded/result/ the print preview seems fine on Chrome 54.0. — Lucas Lazaro, Nov 01 '16 at 00:01
Here's a related discussion for older versions of Chrome http://stackoverflow.com/questions/15603491/how-to-make-html-pages-print-at-a-consistent-size-from-chrome — react_or_angluar, Nov 01 '16 at 00:06

score 0 · Answer 1 · answered Nov 07 '16 at 03:56

0

Turns out the problem was because I didn't have a height set for .container Even though there is no height, because it's all padding, I still needed to add height:0; to it's style or else Chrome would get confused half of the time.

answered Nov 07 '16 at 03:56

user500665

1,220
1
12
38

Chrome Print CSS image not resizing

1 Answers1