我有一个相当大的图像页面,我宁愿让它按比例缩放,而不是在第一页的末尾切掉,然后在下一页继续。我想把整页打印在一张纸上:介绍文本、大图像和页脚文本。我该怎么做?
<!DOCTYPE html>
<html>
<head>
<style>
@media print {
@page {
max-height: 95%;
max-width: 95%;
page-break-inside: avoid;
}
/*
html, body {
max-height: 95%;
max-width: 95%;
}
svg {
max-width: 95%;
max-height: 95%;
}
*/
}
</style>
</head>
<body>
<h1>Print test</h1>
<p>text before</p>
<svg width="500" height="1000">
<rect width="500" height="1000"/>
</svg>
<p>text after</p>
</body>
</html>
max-width
和
max-height
with
和
height
page-break-inside: avoid
是相反的生产力:没有它,我得到2页,有了它我得到3页(文本在它自己的页面上的图像之前,然后是图像的大部分,然后是其余的)。我想浏览器会尽量遵守这条规则,并通过将图片之前的文本推到第一页来在第二页上腾出更多的空间。
scale(...)
因为不是所有的页面都有这么大的图像,我不想放大一个容易适应页面的图像。不过,我知道图像的像素尺寸。
如何让浏览器根据需要缩放页面并在一张纸上打印整个页面?
