如何在Dompdf中将图像与表格单元格的底部对齐

尽管有两个PHP库可让你从HTML生成PDF(即使这些格式没有任何共同点), 但当我们谈论CSS规则解析时, Dompdf无疑是最好的之一。 PDF。得益于此出色的功能, 你可以在浏览器中完成CSS可以完成的大部分工作, 因为并不是所有功能, 但至少是最有用的功能。

使用PDF时, 某天你可能需要做的一件事是图像对齐。当你使用其他库(例如, 没有边距或填充的TCPDF)时, 这可能会让人头疼。在日常情况下, 你可能需要内联添加图像以使用表格以内联布局显示, 例如带有签名的表(这是最常见的情况, 因为图像的高度从未相同, 无法固定), 基于图像的图表等等, 例如以下标记：

<table style="width: 100%;" border="1">
    <tbody>
        <tr>
            <td>
                <img src="http://dummyimage.com/50x50/f0f/fff"/>
            </td>
            <td>
                <img src="http://dummyimage.com/50x60/f0f/fff"/>
            </td>
            <td>
                <img src="http://dummyimage.com/50x70/f0f/fff"/>   
            </td>
            <td>
                <img src="http://dummyimage.com/50x80/f0f/fff"/>    
            </td>
        </tr>
    </tbody>
</table>

此标记将在通过Dompdf生成的PDF中生成以下内容：

如你所见, 图像具有不同的尺寸, 但是高度较小的图像既不与底部也不与顶部对齐, 它们只是漂浮在中间。在许多情况下, 这种方法是不希望的, 这导致我们在图像高度不同时手动强制对齐这些图像。如果希望将高度较小的图像自动对齐到其容器表单元格的底部, 则需要在css中指定vertical-align属性, 并提供值底部。

需要在图像的容器(在本例中为表格单元格td)和图像中都定义此属性, 作为图像的帮助者, 你还需要指定margin-bottom和bottom到0, 如图所示在以下示例中。在这里, 我们声明了2个CSS类, 即图像容器和图像类。在这种情况下, 图像容器是td, 它包含我们的图像和应用于img元素的图像类：

注意

图像的最大高度规则是可选的。这仅在你的图像大于表格单元格的大小时才有必要, 否则表格的大小将增加并且不适合PDF。

<style>
    .image-container {
        vertical-align: bottom;
    }

    .image {
        vertical-align: bottom;
        margin-bottom: 0px;
        bottom: 0px;

        /** 
            Optional: provide a max width to the image
            in case it has a higher resolution
        **/
        max-width: 225px;
    }
</style>

<table style="width: 100%;" border="1">
    <tbody>
        <tr>
            <td class="image-container">
                <img class="image" src="http://dummyimage.com/50x50/f0f/fff"/>
            </td>
            <td class="image-container">
                <img class="image" src="http://dummyimage.com/50x60/f0f/fff"/>
            </td>
            <td class="image-container">
                <img class="image" src="http://dummyimage.com/50x70/f0f/fff"/>   
            </td>
            <td class="image-container">
                <img class="image" src="http://dummyimage.com/50x80/f0f/fff"/>    
            </td>
        </tr>
    </tbody>
</table>

该标记和指定的样式将在我们的PDF中产生以下输出：

编码愉快！

注意

猜你喜欢