html - 数据 :image/jpg;base64 open and resize/zoom-out in new tab

Question

我有一个 input type=file 的预览按钮在新选项卡上打开所选图像的元素:

var image = new Image();
image.src = "data:image/jpg;base64," + myImageDataUrl;

var w = window.open("");
w.document.write(image.outerHTML);

问题是超过浏览器高度和宽度的图像将以全尺寸显示，要求用户使用窗口的滚动条来查看图像。有没有办法调整/缩小图像小于或等于浏览器的尺寸？

我试过将图像包装成 <div style='max-height: 100%; max-width: 100%'>没有成功。

Answer 1

您需要将图像的高度和宽度设置为 100%。

image.height = '100%';
image.width = '100%';