打印时调整图像大小html

我想打印一个包含文本和图像的html页面的div。为此，我使用了一个javascript function和window.print()。现在用它来打印大图像div。打印时调整图像大小html

我需要调整图像的比例。

由于我不是从这个（html,css,javascript）字段，我不知道该怎么做。我在互联网上搜索，但没有得到任何链接帮助打印时调整图像大小。

你能给出任何想法吗？

来源

2016-09-29 MASh

你可以把你的HTML的例子吗？ – SAM

你为什么不使用mediaqueries？ '@media print {...}' – DarkBee

你应该尝试'@media print'并指定高度和宽度 –

你想要做这样的事情：

var images = document.getElementsByTagName('img') 
for(var i = 0; i<images.length; i++) { 
    if (images[i].width > screen.width) { 
    // Reduce the width so image fits. 
    var factor = (screen.width-50)/img.width; 
    images[i].width *= factor; 
    images[i].height *= factor; 
    } 
if (images[i].height > screen.height) { 
    // Reduce the height so it fits. 
    var factor = (screen.height-50)/images[i].height; 
    images[i].width *= factor; 
    images[i].height *= factor; 
    } 

}

这是否帮助？

来源

2016-09-29 05:34:20 nikjohn

感谢您的回答。但这是一个图像。我有多个图像。实际上，图像通过php文件中的循环添加到页面。 – MASh

这只是示例代码。您可以使用'document.getElementsByTagName（'img'）'从HTML中获取图像作为数组，然后迭代该数组。我会更新我的回答 – nikjohn

已更新我的回答 – nikjohn

你可以设置图像的width()和height()象下面这样：

$('.imgClass').width(700); // Units are assumed to be pixels 
$('.imgClass').height(700); 
//.imgClass is a common class on multiple images

希望这将帮助你。

来源

2016-09-29 05:43:55

您可以使用mediaqueries控制打印文档的布局。一个例子是关于这个

@media print { 
    img { 
     max-width : 300px; 
     height : auto; 
    } 
}

更多的信息和一些例子可以发现here

来源

2016-09-29 05:47:58 DarkBee

打印时调整图像大小html

回答

相关问题