打印样式：如何实现上方有文本时图片跨页显示

问题场景 #

有一张大尺寸图片，上方配有描述文本，期望打印时图片从第一页底部开始，剩余部分跨到第二页显示，但实际打印时图片会被整体推到第二页，导致第一页文本下方出现大量空白。

期望效果 #

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |  ________________  |
       | | Top of image   | |
       |____________________|
       ------page break------
        ____________________
Page 2 | | Rest of image  | |
       | |________________| |
       |         …          |

当前效果 #

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |                    |
       |                    |
       |                    |
       |                    |
       |                    |
       |                    |
       |____________________|
       ------page break------
        ____________________
Page 2 | |                | |
       | |                | |
       | |     image      | |
       | |                | |
       | |----------------| |
               ....

解决方案 #

通过CSS打印媒体查询，调整文本和图片的分页规则：

@media print {
  /* 避免文本容器后自动插入分页符 */
  .text-section {
    page-break-after: avoid;
  }

  /* 允许图片跨页分割显示 */
  .large-image {
    break-inside: auto;
    /* 确保图片适配打印页面宽度 */
    max-width: 100%;
    height: auto;
  }
}

代码说明 #

• page-break-after: avoid：告诉浏览器尽可能不在文本区块末尾插入分页符，让图片紧跟文本内容，利用第一页剩余空间。
• break-inside: auto：允许图片被分页分割，不会因尺寸过大被整体移到下一页。
• max-width: 100% 和 height: auto：保证图片在打印页面内自适应宽度，避免超出页边距。

注意事项 #

不同浏览器对打印CSS的支持略有差异，建议在Chrome、Firefox等主流浏览器中测试效果。如果仍有问题，可以尝试给图片容器添加display: block，确保块级元素的分页规则生效。

内容的提问来源于stack exchange，提问作者evan6689