打印时<picture>不显示图片的主因是浏览器在打印模式下忽略其响应式逻辑，只尝试渲染首个<source>或直接fallback至<img>但忽略srcset和sizes；可靠方案是用@media print配合background-image或content:url()显式指定打印图片，并优先选用单<img>加color-adjust: exact等打印优化。
打印时 <picture> 不显示图片的常见原因
浏览器在打印模式下默认忽略 <picture> 的响应式逻辑，只尝试渲染第一个 <source>（甚至跳过），或直接 fallback 到 <img> 但忽略其 srcset 和 sizes。根本原因是：打印媒体不触发 matchMedia()、不执行 picture polyfill（如有）、且多数浏览器不解析 <source> 的 media 属性。
强制打印使用指定图片的可靠写法
绕过 <picture> 的响应式选择逻辑，用 CSS 媒体查询为打印场景显式指定一张确定的图片源：
- 保留
<picture>结构用于屏幕显示，但给内部<img>添加class="print-img" - 用
@media print覆盖该<img>的src，或更稳妥地——用background-image替代 - 避免依赖
<source>，因为打印时它基本无效
示例：
<picture>
<source media="(min-width: 768px)" srcset="hero-desktop.jpg">
<source media="(max-width: 767px)" srcset="hero-mobile.jpg">
<img class="print-img" src="hero-print.jpg" alt="Hero">
</picture>
<p><style>
@media print {
.print-img {
display: block;
width: 100%;
height: auto;
content: url("hero-print.jpg"); /<em> Firefox 支持，但兼容性差 </em>/
}
/<em> 更可靠：改用伪元素 + background </em>/
.print-img::before {
content: "";
display: block;
width: 100%;
height: 300px;
background: url("hero-print.jpg") no-repeat center / contain;
}
.print-img {
visibility: hidden;
}
}
</style>
<img> 的 src 比 <picture> 更适合打印
如果打印是核心需求，直接放弃 <picture>，改用单个 <img> 并针对打印优化：
立即学习“前端免费学习笔记（深入）”；
- 选一张分辨率适中、无透明通道（避免打印灰雾）、色彩模式为 CMYK（如需专业印刷）或 sRGB（普通打印）的图片
- 设置固定宽高，防止打印缩放失真：
width: 10cm; height: auto; - 禁用用户缩放干扰：
-webkit-print-color-adjust: exact;（Chrome/Safari）和color-adjust: exact;（标准） - 避免使用
srcset—— 打印时不生效，还可能让浏览器加载错误资源
验证打印效果的实操检查点
别只看“打印预览”，要实际输出或 PDF 导出验证：
- 打开 Chrome DevTools →
Ctrl+P→ “更多设置” → 勾选“背景图形”，否则background-image不显示 - Firefox 需在
about:config中确认print.print_backgrounds = true - 检查生成的 PDF 是否嵌入图片（而非链接）：用 Adobe Acrobat → 文件 → 属性 → “字体/图像”标签页
- 真实打印机上测试 A4 纸张边距 ——
@page { margin: 1cm; }必须显式声明，否则浏览器默认边距可能裁掉图片
真正麻烦的不是怎么写 HTML，而是不同浏览器对 @media print 解析的细微差异，以及打印机驱动对 CSS 的支持程度。留一张干净、尺寸明确、格式通用的 JPG 作打印专用源，比折腾 <picture> 更省时间。
