Question

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

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

我想避免使用外部程序手动调整它们的大小，因为在稍后几次微调网页时必须更新大小。

＆＃13;

$("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 + "%")
});

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我建议设置元素的背景图像并修改背景大小或使图像占据容器的整个大小并改变容器的宽度和高度。像这样：

＆＃13;

$(".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 + "%")
});

＆＃13;

@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);
}

＆＃13;

<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>

＆＃13;

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

1 个答案: