перерыв страницы не работает на теге изображения

Question

Im печать html из WebView внутри PDF, и я хочу использовать разрыв страницы после каждого изображения. Поэтому я сделал следующее:

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

, но это не влияет на мои изображения. Я пытался использовать то же самое на дивы:

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

и она работала отлично.

Почему он не работает с изображениями?

Answer 1

Это свойство применяется для блокировки элементов, которые генерируют коробку. Он не будет применяться к пустому <div>, который не будет генерировать поле.

- From 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; 
}