如何在CSS中调整列表项自定义图片标记的尺寸？

因为list-style-image属性本身无法直接控制图片大小，所以更推荐用背景图+内边距的方式实现，这样能灵活调整图片尺寸：

方法一：使用background-image替代（推荐） #

给列表项设置背景图，同时控制背景的大小、位置，再通过内边距给图片留出空间：

li {
  /* 去掉默认项目符号 */
  list-style: none;
  /* 设置背景图 */
  background-image: url("你的勾选图标路径");
  /* 控制背景图大小，可根据需求调整像素值，比如和常规项目符号一致的16px */
  background-size: 16px 16px;
  /* 背景图左对齐、垂直居中 */
  background-position: left center;
  /* 背景图不重复 */
  background-repeat: no-repeat;
  /* 左边留出足够空间，避免文字覆盖图片 */
  padding-left: 24px;
}

方法二：修改图片本身尺寸 #

如果一定要使用list-style-image，可以先把图片编辑缩小到合适尺寸（比如16x16像素），再替换到属性的url路径中。这种方法灵活性较差，后续调整尺寸需要重新修改图片，因此更推荐第一种方法。

内容的提问来源于stack exchange，提问作者JANVI MALHOTRA