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