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

【问题标题】：How can I make images show up in the correct scale when printing an HTML page as PDF?将 HTML 页面打印为 PDF 时，如何使图像以正确的比例显示？
【发布时间】：2017-10-28 12:09:49
【问题描述】：

我有一个要打印为 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 预览时看起来像这样：

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

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

【问题讨论】：

标签： html css image pdf

【解决方案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>

【讨论】：