Mpdf: Height and max-height don't work with images

Created on 29 Mar 2017 · 3Comments · Source: mpdf/mpdf

I have this problem/would like to have this functionality

These are mPDF and PHP versions I am using

mpdf 6.1 and php 5.6 on debian linux

This is a PHP code snippet I use

<?php
        $pdf = new mPDF('utf-8', 'A4', '', '', $margin_left, $margin_right, $margin_top, $margin_bottom, 0, 0, $orientation);
        $pdf->SetDisplayMode('fullpage');
        $pdf->WriteHTML($css, 1);
        $pdf->SetHTMLHeader($header);
        $pdf->SetHTMLFooter($footer);
                $pdf->AddPageByArray(array('resetpagenum' => ($floor_limit / $products_per_page) + $countPage + $countIntroPage));
                $pdf->WriteHTML($product_html, 2);

This is a HTML code snippet I use

    public function cssCode($color)
    {
        $html = '
            a { text-decoration: none; }
            #header-left {
                background-color: #'.$color.';
                color: #fff;
                font-size: 14px;
                line-height: 30px;
                width: 387px;
                height: 30px;
                padding-left: 20px;
                float: left;
            }
            #header-right {
                border-bottom: 1px solid #'.$color.';
                width: 386.7px;
                height: 17px;
                float: right;
            }
            #footer {
                height: 20px;
                font-size: 12px;
                line-height: 20px;
            }
            #shopname {
                color: #'.$color.';
                text-align: left;
                padding-left: 20px;
                width: 80%;
            }
            #pagination {
                background-color: #'.$color.';
                color: #fff;
                text-align: center;
                width: 20px;
            }

            .content-box {
                border-bottom: 2px solid #e7e7e7;
                width: 360px;
                height: 330px;
                float: left;
                margin-left: 25px;
                margin-bottom: 25px;
            }
            .last-row {
                border-bottom: none;
                margin-bottom: 0;
            }
            .title-box {
                margin-bottom: 10px;
            }
            .img-box {
                width: 160px;
                float: left;
            }
            .maininfo-box {
                width: 190px;
                float: left;
                margin-left: 10px;
            }
            h3 {
                color: #'.$color.';
                font-size: 12px;
                line-height: 15px;
                text-transform: uppercase;
                text-align: center;
                margin: 0;
            }
            .description {
                font-size: 11px;
                line-height: 14px;
                text-align: justify;
                margin: 0 0 10px;
            }
            .references, .manufacturer {
                font-size: 10px;
                line-height: 13px;
                margin: 5px 0;
            }
            .price {
                color: #'.$color.';
                background-color: #e6e6e6;
                width: 70px;
                height: 25px;
                font-size: 12px;
                line-height: 25px;
                text-align: center;
                float: right;
                margin: 15px 0 0;
            }
            .attributetable, .featuretable {
                margin: 5px 0;
            }
            .attributetable td, .featuretable td {
                font-size: 10px;
                line-height: 13px;
                padding: 0;
            }';

        return $html;
    }

    public function productHtml($parameters, $combinations, $features, $last_row)
    {
        $html = '
        <div class="content-box'.($last_row ? ' last-row' : '').'">
            <div>
                <div class="title-box">
                    <h3>'.$name.'</h3>
                </div>

                <div class="img-box">'.
                    ($has_image ? '<a href="'.$product_url.'"><img src="'.$image_url.'" /></a>' : '').
                '</div>

                <div class="maininfo-box">
                    <div class="description">'.$description_short.'</div>';

        if ($reference || $ean13) {
            $html .= '
                    <div class="references">
                        '.($reference ? $reference_text.': <strong>'.$reference.'</strong>' : '').'<br />
                        '.($ean13 ? $ean13_text.': <strong>'.$ean13.'</strong>' : '').'
                    </div>';
        }

        if ($manufacturer) {
            $html .= '
                    <div class="manufacturer">
                        '.$manufacturer_text.': <strong>'.$manufacturer.'</strong>
                    </div>';
        }

        $html .= '
                    <div class="price">'.$product_price.'</div>
                </div>
            </div>';

        if ($combinations) {
            $html .= $this->attributeHtml($combinations);
        }

        if ($features) {
            $html .= $this->featureHtml($features);
        }

        $html .= '
        </div>';

        return $html;
    }

the problem is around the

if I set in the height inside like
.img-box {
width: 160px;
height: 120px;
float: left;
}
or in this mode
.img-box img {
width: 160px;
height: 120px;
float: left;
}
or in the img tag with the attribute height="120" or using max-height
I've seen that around the image I cannot limit the height

The loaded image are with a size of 250px X 250px and with width I can limit them but not in height

I've tried with
.img-box {
max-width: 160px;
height: 50px
}
but it is the same

thanks

bufix

Source

maofree

Most helpful comment

Hi,
max-height, max-width works if you add it as an inline style:
<img src="..." style="max-width: 51mm; max-height: 24mm;"/>

HKandulla on 6 May 2017

👍9

All 3 comments

Regarding height and width of a block element the list of supported cases has some remarks. Maybe these comments apply to your case?

https://mpdf.github.io/css-stylesheets/supported-css.html

Klap-in on 29 Mar 2017

Hi
thanks
I've already seen it and don many tests, however it is not a big problem because "width" works.
I've reported it only to show a possible error

maofree on 29 Mar 2017

Hi,
max-height, max-width works if you add it as an inline style:
<img src="..." style="max-width: 51mm; max-height: 24mm;"/>

HKandulla on 6 May 2017

👍9

Was this page helpful?

0 / 5 - 0 ratings