CSS 列表样式-图像大小

Try using a <img /> tag instead of setting the list-style-image property. Setting the width and height properties in CSS will crop the image, but if you use a <img /> tag, the image can be re-sized using the value specified by width and height (CSS) properties or (HTML) attributes for that <img /> element.

Almost like cheating, I just went into an image editor and resized the image by half. Works like a charm for me.

You can see how layout engines determine list-image sizes here: http://www.w3.org/wiki/CSS/Properties/list-style-image

There are three ways to do get around this while maintaining the benefits of CSS:

1. Resize the image.
2. Use a background-image and padding instead (easiest method).
3. Use an SVG without a defined size using viewBox that will then resize to 1em when used as a list-style-image (Kudos to Jeremy).

I'd use:

li {
list-style: none;
}
li::before {
content: '';
display: inline-block;
height: y;
width: x;
background-image: url();
}

Thanks to Chris for the starting point here is a improvement which addresses the resizing of the images used, the use of first-child is just to indicate you could use a variety of icons within the list to give you full control.

ul li:first-child:before {
content: '';
display: inline-block;
height: 25px;
width: 35px;
background-image: url('../images/Money.png');
background-size: contain;
background-repeat: no-repeat;
margin-left: -35px;
}

This seems to work well in all modern browsers, you will need to ensure that the width and the negative margin left have the same value, hope it helps

I did a kind of terminal emulator with Bootstrap and Javascript because I needed some dynamic to add easily new items, and I put the prompt from Javascript.

HTML:

  <div class="panel panel-default">
<div class="panel-heading">Comandos SQL ejecutados</div>
<div class="panel-body panel-terminal-body">
<ul id="ulCommand"></ul>
</div>
</div>

Javascript:

function addCommand(command){
//Creating the li tag
var li = document.createElement('li');
//Creating  the img tag
var prompt = document.createElement('img');
//Setting the image
prompt.setAttribute('src','./lib/custom/img/terminal-prompt-white.png');
//Setting the width (like the font)
prompt.setAttribute('width','15px');
//Setting height as auto
prompt.setAttribute('height','auto');
//Adding the prompt to the list item
li.appendChild(prompt);
//Creating a span tag to add the command
//li.appendChild('el comando');   por que no es un nodo
var span = document.createElement('span');
//Adding the text to the span tag
span.innerHTML = command;
//Adding the span to the list item
li.appendChild(span);
//At the end, adding the list item to the list (ul)
document.getElementById('ulCommand').appendChild(li);
}

CSS:

.panel-terminal-body {
background-color: #423F3F;
color: #EDEDED;
padding-left: 50px;
padding-right: 50px;
padding-top: 15px;
padding-bottom: 15px;
height: 300px;
}


.panel-terminal-body ul {
list-style: none;
}

I hope this help you.

I'm using:

li {
margin: 0;
padding: 36px 0 36px 84px;
list-style: none;
background-image: url("../../images/checked_red.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 40px;
}

where background-size set the background image size.

I achieved it by placing the image tag before the li's:

HTML

<img src="https://www.pinclipart.com/picdir/big/1-17498_plain-right-white-arrow-clip-art-at-clipart.png" class="listImage">

CSS

.listImage {
float:left;
margin:2px;
width:25px
}
.li {
margin-left:29px;
}

This is a late answer but I am putting it here for posterity

You can edit the svg and set its size. one of the reasons I like using svg's is because you can edit it in a text editor.

The following is a 3232 svg which I internally resized to initially display as a 1010 image. it worked perfectly to replace the list image

<?xml version="1.0" ?><svg width="10" height="10"  id="chevron-right" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:#34a89b;" d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"/></svg>

I then simply added the following to my css

* ul {
list-style: none;
list-style-image: url(../images/chevron-right.svg);
}

The list-style: none; is important as it prevents the default list image from displaying while the alternate image is being loaded.

Here is an example to play with Inline SVG for a list bullet (2020 Browsers)

list-style-image: url("data:image/svg+xml,
<svg width='50' height='50'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 72 72'>
<rect width='100%' height='100%' fill='pink'/>
<path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3
l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30
m-54 24v-24h9v24z'/></svg>")

• Play with SVG width & height to set the size
• Play with M70 42 to position the hand
• different behaviour on FireFox or Chromium!
• remove the rect

li{
font-size:2em;
list-style-image: url("data:image/svg+xml,<svg width='3em' height='3em'                          xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><rect width='100%' height='100%' fill='pink'/><path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3 3h-12l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30m-54 24v-24h9v24z'/></svg>");
}


span{
display:inline-block;
vertical-align:top;
margin-top:-10px;
margin-left:-5px;
}

<ul>
<li><span>Apples</span></li>
<li><span>Bananas</span></li>
<li>Oranges</li>
</ul>

.your_class li {
list-style-image: url('../images/image.svg');
}


.your_class li::marker {
font-size: 1.5rem; /* You can use px, but I think rem is more respecful */
}