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

尽管有两个PHP库可让你从HTML生成PDF(即使这些格式没有任何共同点), 但当我们谈论CSS规则解析时, Dompdf无疑是最好的之一。 PDF。得益于此出色的功能, 你可以在浏览器中完成CSS可以完成的大部分工作, 因为并不是所有功能, 但至少是最有用的功能。
使用PDF时, 某天你可能需要做的一件事是图像对齐。当你使用其他库(例如, 没有边距或填充的TCPDF)时, 这可能会让人头疼。在日常情况下, 你可能需要内联添加图像以使用表格以内联布局显示, 例如带有签名的表(这是最常见的情况, 因为图像的高度从未相同, 无法固定), 基于图像的图表等等, 例如以下标记：

< table style="width: 100%; " border="1"> < tbody> < tr> < td> < img src="http://img.readke.com/220523/002513A39-0.jpg"/> < /td> < td> < img src="http://img.readke.com/220523/0025134X1-1.jpg"/> < /td> < td> < img src="http://img.readke.com/220523/0025132616-2.jpg"/> < /td> < td> < img src="http://img.readke.com/220523/0025132647-3.jpg"/> < /td> < /tr> < /tbody> < /table>

【如何在Dompdf中将图像与表格单元格的底部对齐】此标记将在通过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 imagein 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://img.readke.com/220523/002513A39-0.jpg"/> < /td> < td class="image-container"> < img class="image" src="http://img.readke.com/220523/0025134X1-1.jpg"/> < /td> < td class="image-container"> < img class="image" src="http://img.readke.com/220523/0025132616-2.jpg"/> < /td> < td class="image-container"> < img class="image" src="http://img.readke.com/220523/0025132647-3.jpg"/> < /td> < /tr> < /tbody> < /table>

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