求助前端生成的网页, 打印的时候当前页空间不足图片会被挤到下一页

[xpyusrs]

我想做到打印的时候空间不足就分割图片
https://codesandbox.io/s/wandering-forest-9sszg 这是最小化代码
https://imgtu.com/i/oAhI10 这是图片被挤下来的错误

[liiihhhh]

我试了一下,貌似 Chrome 主动的为 img 分页.
用`background-image`能实现你想要的效果
https://codesandbox.io/s/laughing-fermat-p18sv?file=/src/components/HelloWorld.vue

[Opportunity]

`background-image + `-webkit-print-color-adjust: exact;` 吧。。。

page-break-* 的属性只有避免分页的没有强制分页的。。。你的需求太奇怪了，正常来讲应该是在 `.content` 上应用 `page-break-inside: avoid;`

[xpyusrs]

@liiihhhh 兄弟问一下这个点打印后背景图不显示怎么解决

[xpyusrs]

@Opportunity 刚试了 page-break-inside: avoid; 实际.content 里面的 item 数量可能多个, 那样会很长, page-break-inside: avoid;的话有些打印出来的纸会留很多空白

[liiihhhh]

@xpyusrs https://imgur.com/a/3Ig22UP 打印的时候选中 背景图片选项