Javascript 如何在网页上打印图像，使其适合纸张大小（A3、A4、A5等）？

我目前正在使用IE9和媒体查询，我不需要让它在其他浏览器上运行

我尝试使用一套规则，如：

@page {
    size: auto;
    margin: 10mm 10mm 10mm 10mm;
}

//。。。匹配所有A格式（A0、A1、A2等）的毫米数的规则，包括边距和公差

/* A4 210x297 mm */
@media print and (min-height: 266mm) and (max-height: 288mm) and
    (min-width: 179mm) and (max-width: 201mm) {
    .img_port {
        height: 267mm !important;
    }
}

//

它似乎可以工作，但不可靠，因为传递给CSS的大小、高度和宽度值似乎取决于打印机，即使始终选择A4格式

我想问的是，是否有任何其他可能的方法来获得相同的结果（根据纸张大小在一页上拟合图像）

---

提前谢谢。

听起来这可能是一份适合以下人员的工作：

---

如果使用pagebreak，它将显示一个空页面

img{
    page-break-inside: avoid;
    padding:0; margin:0; 
    top:0; left:0; right:0;bottom:0;  border:0;
    /*width:2480px; height:3508px!important;*/ /*a4 size */
    width:100%; height:100%; max-width:100% important!
}
.page-break  { display: block; page-break-before: always; }
@page {
size: landscape;
}
@page :first {
  margin-top: 10cm    /* Top margin on first page 10cm */
}

---

IE中打印的长与短在于，你永远无法准确地控制像这样的事情

实际上，当涉及到页面的可打印区域时，打印机具有不同的功能。然后，您还必须处理IE从用户打印的最后一页中记住的任何设置，如缩放、边距、每页页数等

经过多年的努力，我终于放弃了对IE如何处理打印页面的控制，开始将我的打印样式表视为建议

IE<9根本不支持任何有意义的分页符或@page，在我的测试中，IE9忽略了几乎所有@page规则，支持用户上次配置的任何设置

---

要建议IE以页面的全宽和全高打印图像，请尝试回答

您始终可以这样做：

创建一个新的CSS文件，该文件只保存打印时要应用的CSS

*{display: hidden;}
img{display: block; width: 100%; height: 100%;}

然后，您可以在html文档中链接到它：

<link rel="stylesheet" href="link/to/print.css" media="print" type="text/css" />

我不是100%的“display:block；”，您可能需要尝试使用“block”的其他值。我还没有测试过这个，但如果你做了，让我知道它是否有效

没有任何可靠的方法可以做到这一点。

---

我们让用户选择页面大小/方向，并生成包含图像的正确大小的PDF。实际上，您可以生成一张高分辨率（更大）的图片，以获得更好的打印DPI并使其适合页面。

这对我不起作用。高度100%不起作用。只有当图像可以包含在具有相同方向的页面中时（例如，纵横比为1.41的横向A4），宽度100%才有效。将此CSS与纵向图像一起使用，在横向页面中打印不适合高度，但宽度和图片会被裁剪。我无法使用固定高度，因为我不知道纸张的大小。我知道使用（media=“print”）将允许您分离CSS进行打印，你可以在那里玩它。坚持IE是可怕的是，这个问题清楚地说明了目标浏览器，所以对其他产品的宣传会很离题，你说呢？而且，这个问题太老了，不支持任何其他浏览器，只是为了表达用IE使一切正常的痛苦……好吧，我想我们现在已经知道了。只是说这是一个对所问问题做出建设性回答的地方。我相信“我们恨IE”支持小组最好在别处召开会议。如果你赢了，我就辞职。希望你现在快乐

<link rel="stylesheet" href="link/to/print.css" media="print" type="text/css" />