根本原因是浏览器用屏幕样式渲染打印页面，且max-width:100%在打印中参照打印区域宽度而非视口，受边距、缩放及引擎兼容性影响而失效。
打印时图片被截断、撑出纸张或缩得太小，根本原因是浏览器默认用屏幕样式渲染打印页面，而 max-width: 100% 在打印上下文中常失效——它参照的是“打印区域宽度”，但这个区域可能远小于视口，且受打印机边距、缩放设置干扰。
为什么打印时 max-width: 100% 不起作用
打印预览里 max-width: 100% 的“100%”是相对于打印容器（如 @page 内容区）计算的，但该区域宽度不等于屏幕宽度，也不等于你设的 max-width: 1200px 容器。更麻烦的是：Chrome/Firefox 对打印中百分比宽度的支持不一致；Safari 打印时甚至会忽略某些 CSS 尺寸声明。
-
max-width: 100%在打印中可能被重置为none（尤其用了 Bootstrap 或 Tailwind 等框架） - 父容器若用了
flex或grid，打印时布局引擎常退化为 block 流，导致宽度计算失准 - 浏览器打印设置里的“缩放”选项（如“适合页面”）会覆盖 CSS 缩放逻辑，且无法用代码控制
打印专用 CSS 中必须重写图片尺寸
不能复用屏幕样式，得在 @media print 里显式约束图片行为：
- 强制设
width: 100%（不是max-width），并配height: auto—— 打印引擎对width的解析更稳定 - 给图片外层加
display: block和margin: 0 auto，避免内联元素换行留白影响高度 - 移除所有可能干扰的属性：删掉
object-fit、transform、background-image（打印不支持背景图缩放） - 如果图片是内容核心（如报告配图），建议额外加
page-break-inside: avoid防止跨页撕裂
img {
max-width: 100%;
height: auto;
}
@media print {
img {
width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
page-break-inside: avoid !important;
}
}
高清图在打印中反而更糊？要关掉 srcset
打印时浏览器不会根据 srcset 选图，而是直接加载 src 指定的那张——如果 src 是小图（比如 480w 版本），打印出来就是模糊的；如果 src 是大图，又可能因文件体积拖慢打印准备时间。
- 打印前手动把
src指向高分辨率源（如print-ready.jpg），而不是依赖srcset切换 - 或者用 JS 在打印触发时动态替换：
document.querySelector('img').src = 'high-res-for-print.jpg' - 绝对不要在
@media print里试图用sizes控制打印尺寸——它只对屏幕有效
真正容易被忽略的是打印机边距和方向
即使 CSS 全写对了，A4 纸默认左右边距 2cm，横向打印时内容区只剩约 17cm 宽。一张 1920px 宽的图，按比例缩到 17cm 会严重压缩细节。这时候与其调 CSS，不如提前在 HTML 里为打印场景提供简化版图片——比如用 <picture></picture> 包裹，<source media="print"></source> 指向专为打印优化的 SVG 或低压缩 PNG。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
