javascript - CSS - 最大高度不适用于打印图像

Question

我创建了一个网络应用程序，您可以在其中绘制图像。打印网站时，应该只有图片，并且在一页上尽可能多地使用空间。

我的问题:如果图像比宽度高得多，它仍然使用全宽并且下边缘被切掉或在第二页上! Firefox 还在右边缘切掉了大约 2% 的图像。如何使用 css 解决此问题？还是这只能通过 JavaScript 实现？

@media print {

  #content {
    display:none;
  }

  #canvas {
    position:absolute;
    max-width:100%;
    max-height:100%;
    margin:0px;
  }
}

这是我的 JSFiddle:http://jsfiddle.net/Gh28n/6/

Answer 1

诀窍是设置一个可以容纳任何纸张的固定大小，并将最大宽度设置为 100%，这样它就会始终按比例缩小，将高度设置为自动以保持纵横比，如下所示:

    #canvas {
        width: 9999em;
        max-width: 100%;
        max-height: 100%;
        height: auto;
    }

至于边缘的裁剪，移除 position: absolute 修复了它。

编辑:添加了max-height: 100%;