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