dompdf / dompdf/dompdf

Unexpectedly small images at page end with `max-height: 100%`

Open
#2,701 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug css layout
Dominant language
PHP
Stars
11.2k
Forks
1.8k
PR merge metrics
No merged PRs in 30d

Description

From https://github.com/dompdf/dompdf/issues/2631#issuecomment-996897945 by @Nuranto:

I'm not sure if this is linked to this issue, but there is image issues since last two releases. I have troubles with images that are reduced to a very tiny size, when displayed on the end of a page, instead of being displayed on next page. Even a page break does not solve this. See those two examples to understand :

1/

<html>
           <head>

           </head>
           <body>
           <div style="height:80%"></div>
           <div style="text-align: justify;">
           <img src="http://placekitten.com/500/375" style="max-width: 100%; max-height: 100%;">
           <img src="http://placekitten.com/500/375" style="max-width: 100%; max-height: 100%;">
           </div>
           </body>
           </html>

2/

<html>
           <head>

           </head>
           <body>
           <div style="height:90%"></div>
           <div style="text-align: justify;">
           <img src="http://placekitten.com/500/375" style="max-width: 100%; max-height: 100%;">
           <img src="http://placekitten.com/500/375" style="max-width: 100%; max-height: 100%;">
           </div>
           </body>
           </html>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the two HTML examples in the issue, including the 80% and 90% preceding div heights and images using max-height: 100%. Trace the image sizing and page-layout code to determine why images become tiny at the page end. Done means the images retain an appropriate size and move to the next page when insufficient space remains.

Written by the indexing model from the issue text.

Assessment

Tech stack
php
Domain
backend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.