自定义项目符号点大小问题。 插入了一个 img 自定义项目符号点但无法调整项目符号的大小

Question

The img i am using seems to be extremely large and i want to decrease it in size so it can fit as a bullet point. At the moment it just distorts the whole website and i cannot figure out how to edit the size.

 ul { list-style-position: inside; padding-left: 2rem; list-style-image: url("https://i.ibb.co/NLbMNTw/KA-Icon-Burgundy.jpg"); } ul li{ padding-left: 2rem; }

 p class="section-subtitle"> <ul> <li>Savings on running costs/in-house labour costs</li> <li>Allows you to stay focused on your core-business without distractions. </li> <li>Reduce risk – government regulations non-compliance fines</li> <li>Level the playing field – get access to the similar technology and expertise that big companies enjoy </li> </ul> </p>

Answer 1

CSS list image does not have extended styling offered as background image does so one has to be rather creative to make use background image instead of list image. Secondly list image crops the image where background image can be resized.

Two example below either case wise.

Example one: if you need image on UL tag and not on rest of list

 ul { list-style-position: inside; background: url("https://i.ibb.co/NLbMNTw/KA-Icon-Burgundy.jpg") no-repeat; background-size: 15px; } ul li{ padding-left: 20px; }

 <p class="section-subtitle"> <ul> <li>Savings on running costs/in-house labour costs</li> <li>Allows you to stay focused on your core-business without distractions. </li> <li>Reduce risk – government regulations non-compliance fines</li> <li>Level the playing field – get access to the similar technology and expertise that big companies enjoy </li> </ul> </p>

Example two: if you need image on LI tag as in most cases one would

 ul { list-style-position: inside; list-style-type: none; padding=0; margin=0 } ul li{ background: url("https://i.ibb.co/NLbMNTw/KA-Icon-Burgundy.jpg") no-repeat; background-size: 15px; padding-left: 20px; }

 <p class="section-subtitle"> <ul> <li>Savings on running costs/in-house labour costs</li> <li>Allows you to stay focused on your core-business without distractions. </li> <li>Reduce risk – government regulations non-compliance fines</li> <li>Level the playing field – get access to the similar technology and expertise that big companies enjoy </li> </ul> </p>