html - 将 HTML 页面打印为 PDF 时，如何使图像以正确的比例显示？

Question

我有一个要打印为 PDF 的网页。在我到达显示图像的页面之前，一切看起来都很棒。由于我不知道的原因，在 PDF 预览中出现的图像宽度看起来不错，但高度太高。

HTML 看起来像这样:

    <table width="100%">
        <tr>
            <td>
                <table class="table table-striped table-bordered">
                    <tr>
                        <td width="50%" class="centerText">
                            <span style="font-size:small;text-align: center;">Top Depth Photo</span>
                            <img src="@utility.TopDepthImageUri" width="512" height="384" />
                        </td>
                        <td width="50%" class="centerText">
                            <span style="font-size:small;text-align: center;">Bottom Depth Photo</span>
                            <img src="@utility.BottomDepthUri" width="512" height="384" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table class="table table-striped table-bordered ">
                    <tr>
                        <td width="50%" class="centerText">
                            <span style="font-size:small;text-align: center;">Finish Photo</span>
                            <img src="@utility.FinishImageUri" width="512" height="384" />
                        </td>
                        <td width="50%" class="centerText">
                            <span style="font-size:small;text-align: center;">Area Photo</span>
                            <img src="@utility.AreaImageUri" width="512" height="384" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

在网页上图像看起来不错，但是当我打印 PDF 预览时看起来像这样:

您可以看到表格中只显示了一行，图像没有按应有的比例缩放。 (第二行在下一页。)

在这种情况下，如何控制图像的确切高度和宽度？

Answer 1

试试这个

  <table width="100%">
        <tr>
            <td>
                <table class="table table-striped table-bordered">
                    <tr>
                        <td width="50%" class="centerText">
                            <span style="font-size:small;text-align: center;">Top Depth Photo</span>
                            <img src="@utility.TopDepthImageUri" style="max-width: 100%; height: auto;" />
                        </td>
                        <td width="50%" class="centerText">
                            <span style="font-size:small;text-align: center;">Bottom Depth Photo</span>
                            <img src="@utility.BottomDepthUrig" style="max-width: 100%; height: auto;" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table class="table table-striped table-bordered ">
                    <tr>
                        <td width="50%" class="centerText">
                            <span style="font-size:small;text-align: center;">Finish Photo</span>
                            <img src="@utility.FinishImageUri" style="max-width: 100%; height: auto;" />
                        </td>
                        <td width="50%" class="centerText">
                            <span style="font-size:small;text-align: center;">Area Photo</span>
                            <img src="@utility.AreaImageUri" style="max-width: 100%; height: auto;" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>