Chrome Print CSS图片未调整大小

Question

我有一个基本设置，可以将超大图像置于其容器中。它完美无缺，除非您尝试打印Chrome（在FF和IE中打印按预期工作）。相反，Chrome的打印预览根本不会调整图像大小。

恼人地说我无法重现这个问题，所以我希望有人能够提出一些建议吗？

这是基本设置： 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>

Answer 1

原来问题是因为我没有为.container设置一个高度 即使没有高度，因为它都是填充，我仍然需要添加height:0;它的样式，否则Chrome会在一半时间内混淆。