Question

我想打印一个包含文字和图片的html页面div。为此，我使用了带有function的javascript window.print()。到目前为止，它打印div大图像。

我需要按比例调整图像大小。

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

你能提出任何想法吗？

Answer 1

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

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

有关此内容的更多信息以及一些示例here

Answer 2

你想做这样的事情：

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;
  }

}

这有帮助吗？

Answer 3

您可以像下面一样设置图片width()和height()：

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

希望这会对你有所帮助。

Answer 4

或者您可以仅使用内联CSS定义图像的尺寸

<img style="width:150px;float: right" src="image_path.png">

打印html时调整图像大小

4 个答案: