If a Web page including a vertical image is printed, the image is outputted to a second page.

If you print the HTML below, .test-2 will appear on the first page, but
The .test-3 image will be printed on the second page.

Just below .test-2 (pink) on the first page, as shown in the first image (viewed in the browser),
I would like to print the image of .test-3 by attaching it together.

Could you tell me how to describe the CSS?

画像 Occurs when the vertical size of the image exceeds the vertical size of one page.

<html lang="ja">
<body>
<div class="test-1">
   <div class="test-2" style="border:1px solid;">
      I would like to display an image directly below this div in one page.
   </div>
   <div class="test-3" style="border:1px solid;">
      <img src="./test.png" alt="Image larger than 1 page height">
   </div>
</div>
</body>
</html>

html css printing

2023-01-16 01:22

1 Answers

<img> does not fragment, so it is better to display the image as background-image instead of <img>.

https://drafts.csswg.org/css-break/ #posible-breaks

Some content is not fragmentable, for example many types of replaced elements [CSS2], scrollable elements, or a single line of text content.Such content is considered monolithic: it contains no disposable breakpoints.

2023-01-16 11:42

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656