打印時調整圖像大小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

回答

相關問題