Javascript 在浏览器中打印图像

我正在尝试在

html

页面中打印

图像。比如说100张图片，每页一张。
我将图像添加到html内容中，并将其添加到
iframe
标记中，然后尝试打印。图像在底部被剪掉，其余部分移到下一页。我如何克服这个问题

我附加了一个简单的代码片段来打印一个简单的图像。请尝试运行代码片段，并向我建议一种在所有浏览器（ie、ff和chrome）中在单个页面中打印图像的解决方案



印刷品


函数myFunction（）{
//window.print（）；
var iframe=document.createElement（'iframe'）；
iframe.name=“printFrame”；
iframe.style.position=“绝对”；
iframe.style.top=“-10000000px”；
document.body.appendChild（iframe）；
var frameDoc=iframe.contentWindow？iframe.contentWindow:iframe.contentDocument.document？iframe.contentDocument.document:iframe.contentDocument；
frameDoc.document.open（）；
frameDoc.document.write（'@media print{div{page break-inside:avoid；}@page{margin:0；}body{margin:0；}}'）；
frameDoc.document.write（“
”）；
frameDoc.document.write（“”）；
frameDoc.document.close（）；
setTimeout（函数（）{
window.frames[“printFrame”].focus（）；
window.frames[“printFrame”].print（）；
document.body.removeChild（iframe）；
}, 500);
}
您必须编写@media查询以打印html或网页。我正在使用@media查询打印网页。请参阅下面的链接


您找到了解决方案。
给文档一个高度，然后设置图像以填充父元素（html，body）允许的最大空间：

CSS

html, body { height: 100%; }
img { height: 100%; width: auto; }

这似乎解决了所有问题：

html, body { height: 100%; }
img { height: 100%; width: auto; display: block; }
@media print { 
    body { margin: 0; }
    img { box-sizing: border-box; }
    br, button { display: none; }
}