Javascript 以编程方式调整PNG的大小

我有一系列的png文件，需要动态调整大小以适应窗口大小。一些代码片段（上下文无关）：

有了这个，我可以通过手动修改

scaleFactor

将png的大小缩小到我想要的任何大小（小于

originalHeight

和

originalWidth

）

我的问题是，是否以及如何根据窗口大小动态更改

scaleFactor

，例如：

scaleFactor = window.innerHeight..somethingsomething.....;

这可以通过一些简单的数学或算法来实现吗

不要用javascript计算样式

看一看

---

您可以使用类似的方法。调整大小完成后，它将触发500毫秒，并提供新宽度与旧宽度的比率：

let id=false；
设window_width=window.innerWidth；
window.addEventListener（'resize'，（e）=>{
如果（id！=false）clearTimeout（id）；
id=setTimeout（（）=>{
log（“调整大小完成”）；
让新窗口宽度=window.innerWidth；
let ratio=新窗口宽度/窗口宽度；
console.log（'ratio:'，ratio）；
//在这里做点什么？
窗口宽度=新窗口宽度；
}, 500)
})

您将在何处/如何使用此功能？我的意思是，在显示图像时，有很好的CSS解决方案可以缩放图像，完全不需要JS。是否要适合窗口的高度或宽度？每个图像必须与窗口匹配，否则每个“窗口”将有多个图像你可以得到一个X与Y的比例，使用<代码>让Stase= x/y；< /C> >，将一个处理程序设置为<代码>窗口。OnResiths事件。如果你真的需要调整图像数据本身的大小，可以考虑将它加载到HTML5画布中并提取IMAGEDATA。不过，这里的目标还不太清楚。“加文，这相当于纵横比，我支持。”pose OP需要

window.innerWidth/originalWidth

。？@Pierre实际上这取决于您使用scaleFactor的准确程度，即与它相除或相乘。无论如何，您可以就“滚动png文件”的原始问题问一个新问题，我想说很可能存在一个非js解决方案。。。

scaleFactor = window.innerHeight..somethingsomething.....;

.scaled-image {
   width: calc(100% / 2);
}