Message:

I need to make a pdf page where 90% of height will be container div with background with image inside which will fill whole 100% of the container. But it seems it is not possible in mpdf. CSS and html is simple.

<html>

<head>

    <style>

        @page {

            margin-top: 14px !important;

            margin-bottom: 14px !important;

            margin-left: 20px !important;

            margin-right: 20px !important;

        }

        body {

            font-family: Sans-Serif !important;

            box-sizing: border-box;

        }

        .section-header {

            height: 25px !important;

            line-height: 25px !important;

            font-size: 20px;

            margin: 0 0 7px 0 !important;

            padding: 0 !important;

            text-align: center;

        }

        .screenshot-container {

            width: 100%;

            height: 80%;

            max-height: 80% !important;  // This does not work

            background-color: #f4f7fc;

            text-align: center;

            line-height: 100%;

            border: 1px solid red;

        }

        .screenshot-container img {

            height: auto;

            max-height: 80%;

            max-width: 100%;

        }

    </style>

</head>

<body>



<div class="info-container">

    <h1>{$campaign['name']}</h1>

    <div><b><a href="https://portal.lurity.com/campaigns/{$campaign['token']}">Odkaz na detail kampane</a></b><br>

        <div><b>Naplánovanie kampane: </b>{$campaign['date_start']->format('d.m.Y')} - {$campaign['date_stop']->format('d.m.Y')}</div>

        <div><b>Dĺžka kampane:</b> {$campaign['day_diff']} dní</div>

        <div><b>Počet lokalít:</b> {$campaign['location_count']}</div>

        <div><b>Počet obrazoviek:</b> {$campaign['device_count']}</div>

        <div><b>Počet prehratí:</b> {$campaign['impressions']}</div>

        <h2>Celková suma</h2>

        <div><b>Celkom bez DPH:</b> {$budget}{$currency}</div>

        <div><b>Zľava {$discount_sales_percent}%:</b> {$discount}{$currency}</div>

        <div><b>Cena po zľave bez DPH:</b> {$discount_price}{$currency}</div>

    </div>

</div>



<pagebreak />



    <div class="section-header">&nbsp;</div>



    <div class="screenshot-container">

        <img src="var:screenshot" />

    </div>



<pagebreak />

...

Here is the screenshot where you can see red border around the container which should be 80% height.

What is wrong with that? It looks like container ignores its max-height.

My Answer:
Unfortunately, mPDF does not support setting a max-height for an image within a container div. However, you can try using a workaround by setting the height of the container div to a fixed value and using the background-image property in CSS to display the image within the container. Here is an example of how you can achieve this:

html

In this example, the container div has a fixed height of 500px and the background-image property is used to display the image within the container. The background-size property is set to cover to ensure that the image covers the entire container, and the background-position property is set to center to center the image within the container.

You can then use mPDF to generate a PDF from this HTML code. Keep in mind that mPDF may not fully support all CSS properties, so you may need to experiment with different settings to achieve the desired result.

John Davidson

pdf - PHP mPDF 8 can not set up max-height of an image

Rate this post

Comments