CSS 如何使列表项图片随列表项的字体大小缩放，当我们无法使用字体图标

在本文中，我们将介绍如何使用 CSS 实现列表项图片随列表项的字体大小缩放。通常情况下，我们可以通过使用字体图标来实现这个效果，但是有些情况下我们无法使用字体图标，因此我们需要寻找其他解决方案。

阅读更多：CSS 教程

使用背景图片的伪元素

一种常见的方法是使用背景图片的伪元素来代替列表项的实际图片。我们可以使用伪元素的 ::before 或 ::after 属性，并设置背景图片为列表项所需的图片。

ul {
  list-style-type: none;
}

li {
  position: relative;
}

li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  height: 1em;
  width: 1em;
  background-image: url("path/to/image.png");
  background-size: contain;
  background-repeat: no-repeat;
}

在上面的代码中，我们首先将列表的默认样式类型设置为 none，然后使用伪元素 ::before 来为每个列表项添加背景图片。在伪元素的样式中，我们使用了绝对定位，将背景图片水平居左，并使用 transform 属性垂直居中。

使用伪元素的固定宽度和高度

另一种方法是在使用伪元素的同时，为列表项设置固定的宽度和高度。这样，无论列表项的字体大小如何改变，图片的显示尺寸都会保持一致。

li {
  position: relative;
  padding-left: 20px;
}

li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("path/to/image.png");
  background-size: contain;
  background-repeat: no-repeat;
}

在上述代码中，我们在列表项的样式中添加了 padding-left 属性，并将它设置为图片的宽度，这样可以为图片留出空间。然后，我们在伪元素的样式中通过设置宽度和高度来定义图片的尺寸，这样无论列表项的字体大小如何变化，图片的显示尺寸都将保持不变。

使用 background-size 属性

还有一种方法是使用 background-size 属性来根据列表项的字体大小调整背景图片的尺寸。我们可以将 background-size 设置为 cover 或 contain，分别表示图片将被缩放到完全覆盖或完全包含背景区域。

ul {
  list-style-type: none;
}

li {
  background-image: url("path/to/image.png");
  background-repeat: no-repeat;
  background-size: cover; /* or contain */
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1em;
}

在上面的代码中，我们设置了 background-image 属性为背景图片的路径，并通过 background-repeat 属性来指定图片不重复。然后，我们可以通过设置 background-size 为 cover 或 contain 来调整图片的尺寸。最后，我们添加了 padding-top 和 padding-bottom 属性来调整列表项的高度，以适应图片的尺寸。