93375


以下のHTMLを印刷すると、`.test-2`(ピンク部分)は1ページ目に出力されますが、  
`.test-3`(パープル部分)の画像は2ページ目に出力されてしまいます。

1枚目の画像（ブラウザでの表示）のように、1ページ目の`.test-2`(ピンク部分)の直下に、  
`.test-3`(パープル部分)の画像をくっつけて出力したいです。

CSS の記述方法を教えていただけないでしょうか。

※ 画像の縦サイズが1ページの縦サイズを超える場合に発生します。

[code]

    <html lang="ja">
    <body>
    <div class="test-1">
       <div class="test-2" style="border: 1px solid;">
          1ページ内の、このdivの直下に画像を表示したい。
       </div>
       <div class="test-3" style="border: 1px solid;">
          <img src="./test.png" alt="1ページの高さを超えるサイズの画像">
       </div>
    </div>
    </body>
    </html>
    
[/code]

[![1_divの直下に画像をくっつけて表示したい](https://i.stack.imgur.com/Mkdw5.png)](https://i.stack.imgur.com/Mkdw5.png)  
[![2_印刷プレビューを表示すると、画像部分は2ページ目からはじまってしまう](https://i.stack.imgur.com/BEHVe.png)](https://i.stack.imgur.com/BEHVe.png)  
[![3_検証用の画像](https://i.stack.imgur.com/bXrIP.png)](https://i.stack.imgur.com/bXrIP.png)


CC BY-SA 4.0
2023-01-16T05:33:15.360
93373
2023-01-16T06:12:15.440
56414
question
html css 印刷
縦長画像を含むWebページを印刷すると、画像が2ページ目に出力されてしまう。


`<img>` は断片化しないので、`<img>` の代わりに `<div>` などの `background-image`
として画像を表示するのがよいでしょう。

<https://drafts.csswg.org/css-break/#possible-breaks>

> Some content is not fragmentable, for example many types of replaced
> elements [CSS2] (such as images or video), scrollable elements, or a single
> line of text content. Such content is considered monolithic: it contains no
> possible break points.


CC BY-SA 4.0
2023-01-16T05:53:15.597
93375
2023-01-16T06:12:15.440
2023-01-16T06:12:15.440
3475
3475
93373
answer