我将父 div 的大小设置为 A4 (size="21cm 29.7cm")。但是，在 Chrome 打印预览中，如果使用 A4 且没有边距，则 HTML 页面将不适合 A4。我必须将其缩放到 80%。
我的 HTML 中是否存在某些内容导致此问题？我希望 size="21cm 29.7cm" 强制页面为 A4。
更新我发现了这个:
并尝试了以下 CSS，但不起作用:
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
}
HTML:
<!Doctype>
<html>
<head>
<style>
.background
{
position: relative;
top: 0;
left: 0;
}
.text
{
position: absolute;
top: 0px;
left: 0px;
width: 1449px;
height: 2050px;
}
</style>
</head>
<body>
<div style="position: relative; left: 0; top: 0;" size="21cm 29.7cm">
<img src='page0022.jpg' class="background"/>
<img src='0022.svg' class="text"/>
</div>
</body>
</html>
最佳答案
了解尺寸: https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size
将这些代码添加到您的HTML文件中:
<div class="page">...</div>
将这些代码添加到您的CSS文件
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
@media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
}
如果您认为确实需要像素(您实际上应该避免使用像素)，您将必须注意选择正确的 DPI 进行打印:
- 72 dpi(网页)= 595 X 842 像素
- 300 dpi(打印)= 2480 X 3508 像素
- 600 dpi(高质量打印)= 4960 X 7016 像素
但是，我会避免麻烦，只需使用 cm(厘米)或 mm(毫米)来确定尺寸，因为这样可以避免根据哪个客户端可能出现的渲染故障你使用。
关于A4 尺寸的 HTML div 大于 A4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65862676/