I have a unique method for centering an oversized image within its container. Everything works flawlessly, except when attempting to print in Chrome (printing in FF and IE behaves as expected). In Chrome's print preview, the image does not resize at all.
Unfortunately, I have been unable to replicate this issue myself. I am hoping that someone might have some insight on what could be causing it?
Here is the setup I am using: 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>