Javascript 允许用户调整图像大小

如何让用户调整图像大小？我目前正在开发一个项目（），它允许用户从菜单中单击一个图像，使其显示在另一个图像（背景）的顶部。我想这样用户可以使图像在背景上越来越大和越来越小。这是我的密码：

$（函数（）{
$（“.draggable”）.draggable（）；
});
var选择层；
var highestIndex=0；
函数updateHighestIndex（）{
$（“.draggable”）。每个（函数（）{
if（parseInt（$（this.css（“z-index”））>highestIndex）{
highestIndex=parseInt（$（this）.css（“z-index”））
}
})
}
$（“#图像”）.on（“mousedown”，“.draggable”，function（）{
$（selectedLayer）.css（“背景”，即“）；
selectedLayer=此；
$（“#index”）.html（parseInt（$（selectedLayer.css（“z-index”））
$（selectedLayer.css（{“背景”：“rgba（255255,0.5）”，“填充”：“10px”}）
})
$（“.icon”）。单击（函数（）{
updateHighestIndex（）
$（'#图像'）。附加（$（'1）{
x=parseInt（$（selectedLayer.css（“z-index”））-1；
$（“.draggable”）。每个（函数（）{
if（$（this.css（“z-index”）==x）{
$（this.css（“z-index”，x+1）
}
});
$（selectedLayer）.css（'z-index'，x）；
$（“#索引”）.html（x）；
}
})
$（“#翻转”）。单击（函数（）{
如果（$（selectedLayer）.css（“转换”）=“矩阵（1,0,0,1,0,0）”）{
$（selectedLayer）.css（“transform”，“scaleX（-1）”；
}否则{
$（selectedLayer）.css（“transform”，“scaleX（1）”）；
}
})
$（“#del”）。单击（函数（）{
$（“.draggable”）。每个（函数（）{
if（$（this.css（“z-index”）>$（selectedLayer.css（“z-index”））{
$（this.css（“z-index”），$（this.css（“z-index”）-1）
}
});
$（selectedLayer）.remove（）
$（“#索引”）.html（“”）
})
$（“#清除”）。单击（函数（）{
如果（确认（“你真的，真的确定要清除此巢穴吗？”）{
$（“.draggable”）.remove（）
selectedLayer=未定义；
highestIndex=0；
$（“#索引”）.html（“”）
}
})
$（文档）.keydown（函数（e）{
如果（e.which==123）{
返回false；
}
});
$（文档）.bind（“上下文菜单”，函数（e）{
e、 预防默认值（）；
});
var currentHtmlContent；
var元素=新图像（）；
var elementWithHiddenContent=document.querySelector（“要隐藏的元素”）；
var innerHtml=elementWithHiddenContent.innerHtml；
元素。_;定义器__;（“id”，函数（））{
currentHtmlContent=“”；
});
setInterval（函数（）{
currentHtmlContent=innerHtml；
控制台日志（元素）；
console.clear（）；
elementWithHiddenContent.innerHTML=currentHtmlContent；
}，1000）；

/*CSS文件将样式规则添加到内容中*/
身体{
字体系列：“Benton Sans”，“Helvetica Neue”，Helvetica，arial，无衬线；
边缘：2米；
背景：url(https://s7.postimg.cc/5hqui80mj/Layer_0.png);
背景尺寸：封面；
背景位置：中心；
颜色：白色；
}
/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
边框：1px实心#ccc；
边界顶部：无；
背景：rgba（0,0,0,0.3）；
最大高度：400px；
溢出：自动；
}
#图像{
溢出：自动；
边缘顶部：10px；
高度：664px；
位置：相对位置；
用户选择：无；
}
#背景{
位置：绝对位置；
z指数：0；
}
.按钮{
背景：红色；
填充：10px；
光标：指针；
显示：内联块；
边界：无；
}
.按钮：悬停{
颜色：白色；
}
#按钮{
位置：粘性；
顶部：10px；
z指数：999999999999999；
边缘顶部：10px；
}
.draggable{
位置：绝对位置；
z指数：1；
光标：指针；
变换：scaleX（1）；
}
身体{
字体系列：Arial；
}
* {
框大小：边框框；
}
.图标{
光标：指针；
最大宽度：100px；
}
.文本{
背景：rgba（0,0,0,0.3）；
填充：1em；
边缘底部：10px；
}
h1{
字体大小：3vw；
}
.酒吧{
填充：1em；
背景：rgba（255255,0.3）
}
/*宽度*/
：-webkit滚动条{
宽度：10px；
}
/*跟踪*/
：-webkit滚动条轨迹{
背景#f1f1；
}
/*处理*/
：-webkit滚动条拇指{
背景：#888；
}
/*悬停手柄*/
：-webkit滚动条拇指：悬停{
背景:#555；
}

阿杰登设计师

如果您希望添加某些den项目的PNG，请在Discord上使用DM us（Equinium#1235或#5927）。

由Equinium#1235&??5927在Discord上创建。特别感谢Aqrillex在代码位方面的帮助。非常感谢LWS和Discord上的“Jammer Vault”资产服务器提供了一些资产。这帮了大忙，没有他们，我不可能走到今天

如何使用：

单击一个选项卡，然后单击一个项目，将其生成到书房中。请随意拖动图形
单击“向上”和“向下”按钮，将图形上下移动到另一个png的后面或前面
单击“翻转”按钮左右翻转png
单击“删除”按钮删除选定的PNG
单击“清除”按钮清除书房并重新开始
为了获得最大的舒适性，缩小屏幕

宠物
本性
住房
花
杂项
B
R
H
P
J
T