Question

使用仅包含图像的HTML文档，如何缩放图像以填充整个图纸？我希望图像将其宽度/高度缩放到尽可能大/小，以便适合放在一张纸上。

我开始将此用于分页

footer {page-break-after:always;}

我不知道从哪里开始图像的高度/宽度？

想法？

Answer 1

HTML

<img class="printThisFull" src="http://placehold.it/350x150" alt="Klematis" width="110" height="90">
    <img class="printThisFull" src="http://placehold.it/350x150" alt="Klematis" width="110" height="90">

如果要将图像拉伸到整页区域

 @media print {
     .printThisFull {
         width:100%;
         height:100%;
         page-break-after:always
     }
 }

如果要拍摄到整页宽度保持宽高比

 @media print {
     .printThisFull {
         width:100%;
         height:auto;
         page-break-after:always
     }
 }

如果要拍摄到整页高度保持宽高比

 @media print {
     .printThisFull {
         width:auto;
         height:100%;
         page-break-after:always
     }
 }

你可以试试这个

制作以下代码的新html文件并在浏览器中启动它，按crt + p，您将看到它正常工作。

<!doctype html>
<body>
    <img class="printThisFull" src="http://placehold.it/350x150" alt="Klematis" width="110" height="90">
    <img class="printThisFull" src="http://placehold.it/350x150" alt="Klematis" width="110" height="90">
    <style>
        @media print {
            .printThisFull {
                width:100%;
                height:auto;
                page-break-after:always
            }
        }
    </style>
</body>

</html>

如何以最大尺寸打印每张（纸张）纸张1张图像

1 个答案: