[css] 인쇄 스타일 : 이미지가 페이지 나누기에 걸쳐 있지 않은지 확인하는 방법

Program / 글쓴이

인쇄 스타일 시트를 작성할 때 이미지가 여러 페이지에 걸쳐있는 대신 항상 단일 페이지에만 있도록하는 방법이 있습니까? 이미지는 페이지보다 훨씬 작지만 문서 흐름에 따라 페이지 하단에서 끝나고 분할됩니다. 내가보고있는 동작의 예는 다음과 같습니다.

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 |  ________________  |
       | | Full image     | |
       | |                | |
       | |________________| |
       |         …          |

그동안 나는 LaTeX의 수레에 대해 불평했고, 여기에서 동일한 기능을 요구하고 있습니다.이 작업을 수행 할 수 있습니까? 모든 브라우저에서 작동하는 것에 대해 반드시 염려하지는 않습니다.이 문서는 PDF로 변환하기 위해 작성하는 일회성 문서 인 경우가 많습니다.

답변

내가 생각할 수있는 유일한 방법은 다음 CSS 규칙 중 하나 (또는 ​​잠재적으로 그 이상)를 사용하는 것입니다.

img {
    page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-inside: avoid; /* or 'auto' */
}

이러한 선언은 블록 수준 요소에만 적용된다는 점을 반쯤 display: block;상기합니다. , 목록 등 …).

여기에 몇 가지 유용한 토론이 있습니다. ” 가장media="print" 유용한 특정 브라우저 간 호환 CSS 속성은 무엇입니까? “

참조 :

답변