分页符不适用于图像标签答案

【问题标题】：page break not working on image tag分页符不适用于图像标签
【发布时间】：2017-06-26 08:04:15
【问题描述】：

我正在从 PDF 内的 WebView 打印 html，我想在每张图片后使用分页符。所以我做了以下事情：

img {
    page-break-before: always;
    page-break-inside: avoid;
}

但它对我的图像没有影响。我尝试在 div 上使用相同的：

div {
    page-break-before: always;
    page-break-inside: avoid;
}

而且效果很好。

为什么它不能处理图像？

【问题讨论】：

【解决方案1】：

此属性适用于生成框的块元素。它不适用于不会生成框的空 <div>。

——From MDN关于分页符

您需要将图像设为块级元素，例如display: block;。

【讨论】：

【解决方案2】：

我在文档中找不到这个，但我相信分页符仅适用于块级元素。因此，将其应用于您的图像或容器。

img {
    display: block;
    page-break-before: always;
    page-break-inside: avoid;
}

【讨论】：