0

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

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

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

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

<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>

1_divの直下に画像をくっつけて表示したい
2_印刷プレビューを表示すると、画像部分は2ページ目からはじまってしまう
3_検証用の画像

1 件の回答 1

0

<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.

1
  • ありがとうございます、とても勉強になりました! background-image を使用した際の疑問が湧いてきましたので、別件としてポストさせていただきました。もしおわかりになりましたらアドバイスいただけますと幸いです。 ja.stackoverflow.com/questions/93379/…
    – vips
    Commented 2023年1月16日 7:08

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。