如何通过CSS实现打印纸张上精确毫米尺寸的图像输出？

可以实现精确匹配，问题出在浏览器默认打印样式、盒模型规则以及打印缩放设置上，按以下步骤调整CSS即可：

• 首先重置页面打印边距，避免浏览器默认边距干扰：

@page {
  margin: 0;
  size: auto;
}

• 重置全局盒模型和边距，确保元素尺寸计算准确：

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

• 针对目标图像设置打印专属样式，强制精确尺寸并清除额外间距：

@media print {
  img.print-exact {
    width: 40mm;
    height: 50mm;
    display: block;
    margin: 0;
    object-fit: none; /* 若需严格匹配尺寸，忽略原图比例；如需保持比例且不溢出，可换用contain/cover */
  }
}

最后务必注意：在浏览器打印对话框中，把缩放选项设置为「实际尺寸」（不同浏览器表述略有差异），不要选「适应页面」或自定义缩放比例，这是确保尺寸精准的关键一步。

内容的提问来源于stack exchange，提问作者daGo