防止在表格内调整图像大小（表格在另一个单元格内）

Posted 2023-03-14

【中文标题】防止在表格内调整图像大小（表格在另一个单元格内）

【英文标题】：Prevent Resizing of Image Inside a Table (Table is in inside another Cell)

【发布时间】：2020-05-11 05:02:19

【问题描述】：

我的应用程序能够制作 PDF 文档，但在一个单元格中显示多个图像时遇到问题。

    <td class="table-cell" style="vertical-align: top;">
        <table class="photo">
            <tr>
                @forelse ($item->photos as $photo)
                <td class="inline-block">
                    <img src="HelpMe::photo_tumbnail_200($photo->filepath)">
                </td>
                @empty
                Item does not have any photo.
                @endforelse
            </tr>
        </table>
    </td>

我发送到我的视图的图像已经是所需的大小，我不希望它们被调整大小。 以上代码将所有图像放入一行。

因此，如果我在该循环中有 15 张图像，它会将 15 张调整大小的图像并排放置在一行中。我不希望表格调整图像大小，当该行上的空间用完时，我希望它跳到下一行。

我怎样才能做到这一点？

【问题讨论】：

请在您的问题中添加一个可重现的最小示例，以加快解决部分的速度。

【参考方案1】：

您可以添加<table class="photo flex flex-wrap -mb-4">，如您所见here

       <td class="table-cell" style="vertical-align: top;">
            <table class="photo flex flex-wrap -mb-4">
                <tr class="w-1/3 mb-4 bg-gray-400 h-12">
                    @forelse ($item->photos as $photo)

                        <img src="HelpMe::photo_tumbnail_200($photo->filepath)">

                    </td>
                    @empty
                    Item does not have any photo.
                    @endforelse
                </tr>
            </table>
        </td>

【讨论】：

我使用顺风，但没有运气。你认为它会做什么？

试试这个在 标签之后添加 标签