Javascript CSS：标签内容更改已用png文件的大小

如何在以下网页片段中更改上下箭头png文件的大小？它们用作标签内容

目前它们相当大（比你想象的要大）

我希望避免使用外部程序手动调整它们的大小，因为大小必须在以后的网页微调过程中多次更新

$（“标签[用于]”）。在（“单击”）上，函数（事件）{
$（“#输入”）.val（函数（#，n）{
return event.target.htmlFor==“向上”
？+n<+this.max？+n+5:n
：+n>+this.min？+n-5:n；
}).触发器（“箭头”）
});
$（“#输入”）。打开（“输入箭头”，函数（事件）{
if（event.isTrigger）{
控制台日志（“箭头”）；
}否则{
控制台日志（“输入”）
}
console.log（this.value+“%”）
});
@charset“UTF-8”；
div{
位置：相对位置；
顶部：50px；
}
输入[type=“number”]{
宽度：45px；
轮廓：薄实海军；
}
标签[for=“up”]：第n个类型（1）：在{
内容：网址(https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/png/512/arrow-up-a.png);
顶部：-20px！重要；
左：32.5px；
位置：相对位置；
}
标签[for=“down”]：在{
内容：网址(https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/png/512/arrow-down-a.png);
位置：相对位置；
顶部：20px！重要；
左：-32.5px；
}
标签[for=“down”]：在{
内容：“%”；
位置：相对位置；
字体大小：粗体；
字体大小：14px；
位置：相对位置；
左：-10px；
}
我建议设置元素的背景图像并修改背景大小，或使图像占据容器的全部大小并更改容器的宽度和高度。大概是这样的：


$（.icon.up、.icon.down”）。在（“单击”上，函数（事件）{
$（“#输入”）.val（函数（#，n）{
return event.target.classList.contains（'up'））
？+n<+this.max？+n+5:n
：+n>+this.min？+n-5:n；
}).触发器（“箭头”）
});
$（“#输入”）。打开（“输入箭头”，函数（事件）{
if（event.isTrigger）{
控制台日志（“箭头”）；
}否则{
控制台日志（“输入”）
}
console.log（this.value+“%”）
});
@charset“UTF-8”；
输入[type=“number”]{
轮廓：薄实海军；
宽度：100%
}
.步骤{
宽度：50px；
}
.图标{
宽度：15px；
高度：15px；
背景大小：100%；
背景重复：无重复；
显示：块；
保证金：自动；
}
.icon.up{
背景图片：url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/png/512/arrow-up-a.png);
}
.icon.down{
背景图片：url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/png/512/arrow-down-a.png);
}