用屏幕边框替换jQuery可调整大小的交互

Question

我正在玩jQuery，发现了这一点：

https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/ https://codepen.io/chriscoyier/pen/VvRoWy

并尝试将其应用于我正在从事的项目。问题是创建者使用可拖动的手柄来调整容器的大小，我希望将其简单地链接到屏幕尺寸。因为我对脚本真的很陌生，所以我认为我很了解所有功能，但是我真的很难确定如何重写脚本以适应我的需求。

据我了解，这会将上述句柄添加到“包装器”元素中，并说一旦使用它就会触发“ doResize”功能。

$wrapper.resizable({resize: doResize)};

所以我猜这是我必须更改的部分，但我只是不知道如何。

关于函数本身，我只是没有使用“ origin”变量，因为它在任何地方都没有被调用。

function doResize(event, ui) {

var scale, origin;
scale = Math.min(
ui.size.width / elWidth,    
ui.size.height / elHeight
);

$el.css({
transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
});

}

最后只是检查我是否明白了这部分代码是否正确，如果没有激活“ doResize”功能，则包装元素的值为其默认值（在CSS中指定） ）？

var starterData = { 
size: {
width: $wrapper.width(),
height: $wrapper.height()}
}

doResize(null, starterData);