使用typset.sh，我能夠通過(guò)blade生成PDF文檔。我試圖設(shè)置一個(gè)固定大小的???文件中的所有圖像，并把它們組織在一個(gè)網(wǎng)格中。

在這個(gè)PDF中，有10個(gè)圖像，8個(gè)可以放在一頁(yè)中，所以最后兩個(gè)移到第二頁(yè)。正確，但是，之前的兩個(gè)渲染在最后忽略了我為@page設(shè)置的邊距規(guī)則，這是我正在試圖修復(fù)的一個(gè)錯(cuò)誤，請(qǐng)參見(jiàn)截圖:

以下是HTML:

<section id="images">
            @foreach ($record->incident_images as $image)
                <div class="image">
                    <img src="{{ asset('storage/' . $image) }}" />
                </div>
            @endforeach
        </section>

Typset設(shè)置文檔的CSS代碼:

@page {
            size: A4;
            margin: 10mm;
            /* bleed: 13mm; */

            @bottom-center {
                content: 'Page 'counter(page) ' of 'counter(pages);
            }
        }

這是圖片css:

section#images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2mm;
            margin-top: 0; /* Adjust the top margin as needed */
            margin-bottom: 0; /* Adjust the bottom margin as needed */
        }

        .image {
            width: 100%;
            border: 1px solid black;
            break-inside: avoid; /* Ensure that each container stays together on a single page */
        }

        .image>img {
            width: 100%;
            height: 200vh; /* Set the image height to 50% of the viewport height */
            object-fit: cover;
        }

根據(jù)文檔，我嘗試使用分頁(yè)符，但問(wèn)題仍然沒(méi)有解決:

分頁(yè)符控制 先斷后斷:這些屬性可以 用于指定應(yīng)該或永遠(yuǎn)不應(yīng)該出現(xiàn)分頁(yè)符的位置 在元素之前或之后。 內(nèi)部突破:此屬性可用于 防止元素中出現(xiàn)分頁(yè)符。 孤兒和寡婦:這些屬性可用于指定 必須出現(xiàn)在頁(yè)面頂部或底部、在頁(yè)面之前的行 允許休息。