CSS：標籤內容更改使用的png文件的大小

Question

如何更改以下網頁代碼段中向上和向下箭頭png文件的大小？它們被用作標籤內容。

目前它們非常大（比你想象的大）。

我想避免使用外部程序手動調整它們的尺寸，因爲在稍後幾次微調網頁期間必須更新大小。

$("label[for]").on("click", function(event) { 
 
    $("#input").val(function(_, n) { 
 
    return event.target.htmlFor === "up" 
 
      ? +n < +this.max ? +n + 5 : n 
 
      : +n > +this.min ? +n - 5 : n; 
 
    }).trigger("arrow") 
 
}); 
 

 
$("#input").on("input arrow", function(event) { 
 
    if (event.isTrigger) { 
 
    console.log("arrow"); 
 
    } else { 
 
    console.log("input") 
 
    } 
 
    console.log(this.value + "%") 
 
});

@charset "UTF-8"; 
 
div { 
 
    position: relative; 
 
    top: 50px; 
 
} 
 
input[type="number"] { 
 
    width: 45px; 
 
    outline: thin solid navy; 
 
} 
 
label[for="up"]:nth-of-type(1):before { 
 
    content: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/png/512/arrow-up-a.png); 
 
    top: -20px !important; 
 
    left: 32.5px; 
 
    position: relative; 
 
} 
 
label[for="down"]:before { 
 
    content: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/png/512/arrow-down-a.png); 
 
    position: relative; 
 
    top: 20px !important; 
 
    left: -32.5px; 
 
} 
 
label[for="down"]:after { 
 
    content: "%"; 
 
    position: relative; 
 
    font-weight: bold; 
 
    font-size: 14px; 
 
    position: relative; 
 
    left: -10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <label for="up"></label><input id="input" type="number" min="0" max="100" step="5" value="0"><label for="down"></label> 
 
</div> 
 
<script> 
 
</script>

Answer 1

我建議設置元素的背景圖像和修改背景大小或使圖像佔用容器的全尺寸並且改變該容器的寬度和高度。事情是這樣的：

$(".icon.up, .icon.down").on("click", function(event) { 
 
    $("#input").val(function(_, n) { 
 
    return event.target.classList.contains('up') 
 
      ? +n < +this.max ? +n + 5 : n 
 
      : +n > +this.min ? +n - 5 : n; 
 
    }).trigger("arrow") 
 
}); 
 

 
$("#input").on("input arrow", function(event) { 
 
    if (event.isTrigger) { 
 
    console.log("arrow"); 
 
    } else { 
 
    console.log("input") 
 
    } 
 
    console.log(this.value + "%") 
 
});

@charset "UTF-8"; 
 
input[type="number"] { 
 
    outline: thin solid navy; 
 
    width: 100% 
 
} 
 

 
.step { 
 
width: 50px; 
 
} 
 

 
.icon { 
 
    width: 15px; 
 
    height: 15px; 
 
    background-size: 100%; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
    margin: auto; 
 
} 
 

 
.icon.up { 
 
    background-image: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/png/512/arrow-up-a.png); 
 
} 
 

 
.icon.down { 
 
background-image: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/png/512/arrow-down-a.png); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="step"> 
 
<div class="icon up"></div> 
 
    <input id="input" type="number" min="0" max="100" step="5" value="0"> 
 
<div class="icon down"></div> 
 
</div> 
 
<script> 
 
</script>