打印图片问题核心是确保浏览器在print媒体下信任图片尺寸与可见性：需清除隐藏样式、强制重置宽高、用绝对单位控制、添加page-break-inside: avoid防分页错位，并优先使用svg或内联base64图。
打印时图片不显示或被裁剪
多数浏览器默认会禁用背景图、隐藏非可见区域内容，且 img 元素若设了 max-width: 100% 或包裹在响应式容器中，打印时容易缩放失真或溢出页边。关键不是“让图片显示”，而是“让浏览器在 print 媒体下信任这张图的尺寸和可见性”。
- 确保
<img alt="HTML5如何设置图片打印样式_HTML5设置打印样式技巧【输出】" >没有设置display: none或visibility: hidden（哪怕只在某类媒体查询里） - 移除或覆盖所有影响布局的 CSS 类，比如
container-fluid、responsive-img等框架类 - 强制重置宽高：
@media print { img { width: auto !important; height: auto !important; max-width: 100% !important; page-break-inside: avoid; } }
使用 @media print 控制图片尺寸与位置
打印样式不是屏幕样式的简单复刻。浏览器对 vh/vw、flex 自适应、CSS Grid 在 print 模式下支持极差，必须用绝对单位或明确比例控制图片。
- 避免用
%或em设置图片宽高，改用cm、in、pt（如 A4 宽约 21cm，安全边距留 1.5cm） - 若需居中，用
margin: 0 auto+display: block，别依赖text-align: center（部分浏览器忽略） - 多图并排？放弃
float或inline-block，改用display: table-cell或固定宽度div包裹
打印 PDF 时图片模糊或分辨率低
这不是 HTML 问题，而是浏览器将 DOM 渲染为位图再转 PDF 的固有限制。高 DPI 图片（如 2x Retina）在打印时会被降采样，尤其 Chrome 默认以 96dpi 渲染打印预览。
- 给
<img alt="HTML5如何设置图片打印样式_HTML5设置打印样式技巧【输出】" >加srcset不起作用——print 媒体不触发 srcset 切换 - 真正有效的是：提供物理尺寸匹配的源图（例如要占 10cm 宽，就准备 378px 宽的图，按 96dpi 换算）
- 更稳妥做法：用
<svg></svg>替代位图，矢量图打印无损；或导出为内联 base64 的<img src="data:image/png;base64,..." alt="HTML5如何设置图片打印样式_HTML5设置打印样式技巧【输出】" >，避免跨域/路径加载失败
Chrome 打印预览中图片错位或重复
这是 Chrome 80+ 版本引入的「分页渲染优化」导致的常见 bug：当图片高度接近页面边界，且未显式声明 page-break-inside: avoid 时，Chrome 可能将其切开或复制到下一页。
立即学习“前端免费学习笔记（深入）”；
- 必须为每个
<img alt="HTML5如何设置图片打印样式_HTML5设置打印样式技巧【输出】" >添加page-break-inside: avoid（Firefox 和 Safari 也建议加） - 如果图片是标题配图，加
page-break-after: avoid防止标题和图被拆开 - 慎用
position: absolute—— print 媒体中它常被忽略或重置为 static
实际生效最稳的最小打印样式片段：
@media print {
* {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
img {
display: block;
margin: 0 auto;
width: 15cm !important;
height: auto !important;
page-break-inside: avoid;
}
}复杂点在于：不同浏览器对同一段 print CSS 解析差异比想象中大，尤其是 Edge（Chromium 内核前）和 Safari。最保险的做法，是把关键图片抽出来单独建一个精简 HTML 页面，只保留必要结构和内联样式，绕过框架干扰。
