Chrome 打印 CSS 图像未调整大小答案

【问题标题】：Chrome Print CSS image not resizingChrome 打印 CSS 图像未调整大小
【发布时间】：2017-03-14 02:56:24
【问题描述】：

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

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

<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 我无法在完整代码之外复制问题，所以我正在寻找可能导致问题的建议？
这个解决方案可能对您有用吗？ stackoverflow.com/questions/25396682/…
@user500665 你可以发布你的完整代码，正如保罗提到的，如果你去jsfiddle.net/aed2gh3w/embedded/result，Chrome 54.0 上的打印预览似乎很好。
打印预览对我来说也很好。

标签： css google-chrome

【解决方案1】：

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

【讨论】：