CSS - max-height不适用于打印图像

Question

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

我的问题：如果图像比宽度高得多，它仍然使用全宽，下边缘被切断或在第二页上！ 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％，因此它将始终按比例缩小，并将高度设置为自动以保持纵横比，如下所示：< / p>

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

对于边缘上的剪裁，删除position: absolute修复它。

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