使用 mPDF 在 div 中的 img 下不需要的空间

Question

I am using mPDF to create a PDF from the following HTML-Code:

<div style="border: 5px solid black; height: 115px;">
    <div style="width: 29%; height: 115px; float: left; background-color: red;">
        <img src="testimage.png"
             alt="Bild 1" style="height: 115px;">
    </div>
    <div style="width: 55%; float: left; padding-top: 60px; font-size: 18px; font-weight: bold;">
        SOME TEXT
    </div>
    <div style="float: right; width: 16%; font-size: 18px; padding-top: 10px;">
        <div style="float: left; width: 25px;">ANOTHER TEXT</div>
    </div>
</div>

The outcome in the PDF is rather unsatisfying: The outcome

I am dealing with this weird space below the image. I tried giving the image a blue and the div a red background and it is always red, so the div is too high. It just ignores every fixed height I give. I already read about using display: top but none of it worked. What exactly is the problem here? On a HTML-Page everything is just fine.

Answer 1

Try adding width:100%; height:100%; object-fit:cover; to the image. Hope it works for you.

 <div style="border: 5px solid black; height: 115px;"> <div style="width: 29%; height: 115px; float: left; background-color: red;"> <img src="https://via.placeholder.com/150" alt="Bild 1" style="width:100%; height:100%; object-fit:cover;"> </div> <div style="width: 55%; float: left; padding-top: 60px; font-size: 18px; font-weight: bold;"> SOME TEXT </div> <div style="float: right; width: 16%; font-size: 18px; padding-top: 10px;"> <div style="float: left; width: 25px;">ANOTHER TEXT</div> </div> </div>