我创建了一个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/

最佳答案

诀窍是设置一个固定得足够大以适合任何纸张的固定纸,然后将最大宽度设置为100%,以便始终将其缩小,将高度设置为自动以保持纵横比,如下所示:

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


至于边缘的剪裁,请移除position: absolute并将其固定。

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

10-07 19:14
查看更多