分页不工作在图像标签上

Question

我从一个WebView打印PDF中的html，我想在每个图像之后使用一个分页。所以我做了以下几件事：

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

但这对我的形象没有影响。我试着在div上使用相同的方法：

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

而且效果很好。

为什么它不处理图像呢？

Answer 1

此属性适用于生成框的块元素。它不会应用于一个空的<div>，它不会生成一个盒子。

-关于分页的来自MDN

您需要使您的图像成为块级元素，例如使用display: block;。

见page-break-before、page-break-after或page-break-inside

Answer 2

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

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