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

Question

my app is able to make PDF documents and I have issues displaying multiple images in a cell.

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

1. Images i send to my view is already at needed sizes, I dont want them to be resized.
2. Above code fits all all images into one row.

So what happens is that if I have 15 images in that loop, it will put 15 resized images right next to each other in one row. I dont want the table to resize the images, when space runs out on that row, I want it to jump to the next row.

How could i make this happen?

Answer 1

you can add <table class="photo flex flex-wrap -mb-4"> as you can see 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>