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

Question

我正在使用 mPDF 从以下 HTML 代码创建 PDF：

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

PDF 中的结果相当不令人满意：结果

我正在处理图像下方的这个奇怪的空间。 我尝试给图像一个蓝色，给 div 一个红色背景，它总是红色，所以 div 太高了。 它只是忽略了我给出的每个固定高度。 我已经阅读了有关使用display: top的信息，但没有一个起作用。 这里到底有什么问题？ 在 HTML 页面上，一切都很好。

Answer 1

尝试添加width:100%; height:100%; object-fit:cover; 到图像。 希望对你有效。

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