如何调整用作无线字段的CSS图像的大小？

我不知道如何在这里调整星星的大小，因为每当我更改“大小”或“宽度”属性时，似乎都会取消单击每个星星的功能。当我更改宽度时，我还看到超过5颗星被渲染。我的问题是，为了使星星变小，我需要在这里更改哪些值？为什么在更改大小属性时显示的星星数超过5颗

<span class="star-rating">
  <input type="radio" name="rating" value="1"><i></i>
  <input type="radio" name="rating" value="2"><i></i>
  <input type="radio" name="rating" value="3"><i></i>
  <input type="radio" name="rating" value="4"><i></i>
  <input type="radio" name="rating" value="5"><i></i>
</span>


.star-rating {
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  width: 250px;
  height: 50px;
  overflow: hidden;
  position: relative;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
.star-rating i {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  z-index: 1;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
.star-rating input {
  -moz-appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  display: inline-block;
  width: 20%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
}
.star-rating input:hover + i,
.star-rating input:checked + i {
  opacity: 1;
}
.star-rating i ~ i {
  width: 40%;
}
.star-rating i ~ i ~ i {
  width: 60%;
}
.star-rating i ~ i ~ i ~ i {
  width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
  width: 100%;
}
::after,
::before {
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
}

---

恒星只是背景图像，因此符合任何背景图像的常规规则

它们的background size属性为contain，用于根据.star rating元素的高度调整星星的大小

调整星级的高度将改变星星的大小。调整宽度将改变可见恒星的数量

将星星评级的宽度和高度减半将使星星的大小减半，因为您的输入具有100%的高度和20%的宽度，只要五颗星可见，您的输入和星星将匹配

.星级{ 字号：0； 空白：nowrap； 显示：内联块； 宽度：125px； 高度：25px； 溢出：隐藏； 位置：相对位置； 背景：url数据：image/svg+xml；base64，phn2zyb2zjzaw9upsixljeiiihhtbg5zpsjodhrwoi8vd3lnczlm9yzy8ymdawl3n2zyigeg1sbnm6egxpbms9imh0dha6y93d3cudzmub3jnlze5otkvegxpbmsiih9ijbwegiget0imhb4ij0imhbg2h2h2hzzp4iib2awv394widpsigag3zjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjJREREREIREIB2LUDHM9IJEWLDAGMTMUMDKSNI41ODMGMJASNY42MZKGMTUSMTIUZY0IDE2LJE4LDIWIDWIDUZY0IDASNY42MZKGNI45MSW2LJU4YAILZ48L3N2ZZZZ4='； 背景尺寸：包含； } .一级星级{ 不透明度：0； 位置：绝对位置； 左：0； 排名：0； 身高：100%； 宽度：20%； z指数：1； 背景：url数据：image/svg+xml；base64，phn2zyb2zjzaw9upsixljeiiihhtbg5zpsjodhrwoi8vd3lnczlm9yzy8ymdawl3n2zyigeg1sbnm6egxpbms9imh0dha6y93d3cudzmub3jnlze5otkvegxpbmsiih9ijbwegiget0imhb4ij0imhbg2h2h2hzzp4iib2awv394widpsigag3zjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjJRKZERJG4IIBWB2LUDHM9IJEWLDAGMTMUMDKSNI41ODMGMJASNY42MZKGMTUSMTIUZY0Ide2LJE4LWIDWIDUZY0IDASNY42MZKGNI45MSW2LJU4MJAILZ48L3N2ZZZZ4='； 背景尺寸：包含； } .星级输入{ -moz外观：无； -webkit外观：无； 不透明度：0； 显示：内联块； 宽度：20%； 身高：100%； 保证金：0； 填充：0； z指数：2； 位置：相对位置； } .星级输入：悬停+i， .星级输入：选中+i{ 不透明度：1； } .星级i~i{ 宽度：40%； } .星级i~i~i{ 宽度：60%； } .星级i~i~i~i{ 宽度：80%； } .星级i~i~i~i~i{ 宽度：100%； } ：：之后， ：：之前{ 身高：100%； 填充：0； 保证金：0； 框大小：边框框； 文本对齐：居中； 垂直对齐：中间对齐； }