如何打印完全填充 A4 或其他格式的图像？答案

【问题标题】：How to print an image completely filling an A4 or other format?如何打印完全填充 A4 或其他格式的图像？
【发布时间】：2015-09-09 19:54:24
【问题描述】：

如果我使用 Chrome 或 Firefox 打印图像，我会遇到一些问题。我还没有找到如何摆脱纵向或横向的白色边框。可悲的是，这个stackoverflow-solution 似乎对我不起作用。

目前我使用这个代码：

    echo "<body onload=\"window.print()\" onfocus=\"window.close()\">";

    echo "<style type=\"text/css\" media=\"print\">";
    echo "@page { size: auto; }";
    echo "</style>";

    echo "<img src=\"". $dirname . '/' . $photo ."\">";

我得到的结果与将其从 windows 文件夹拖放到 Internet 导航器中的结果相同，如下例所示：

Chrome 设置为： - 景观 - 颜色 - A4 - 不影响

【问题讨论】：

可悲的是，这个 stackoverflow-solution 似乎对我不起作用。 - 你链接到的 SO 问题说这是不可能的。
@BSMP 我知道只有 IE 是不可能的。

标签： html css image

【解决方案1】：

您的图像文件的尺寸可能与纸张大小不同，因此除非您想拉伸图像以填满页面，或者使用background-size: cover; 之类的东西，否则总会有边距

【讨论】：

图片尺寸大于 A4。无论如何，Bleuscyther 找到了解决方案，感谢您的帮助！

【解决方案2】：

尝试应用容器 css：

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
}

然后不使用 img 标签，而是使用背景图片 + 尺寸 cover

body {
    background-image:  url(images/background.svg);
    background-size:   cover;                      /* <------ */
    background-repeat: no-repeat;
    background-position: center center;            /* optionally, center the image */
}

来源：

【讨论】：

很好的答案，效果很好！非常感谢！