Bildgröße im CSS-Listenstil

Ich versuche, benutzerdefinierte SVG-Symbole mit CSS für <ul>die Listenelemente eines Objekts festzulegen. Beispiel:

<ul>
    <li style="list-style-image: url('first.svg')">This is my first item</li>
    <li style="list-style-image: url('second.svg')">And here's my second</li>
</ul>

Das Problem ist, dass die Bilder zu groß sind und die Höhe der Linien strecken. Ich möchte die Bildgröße nicht ändern, da der Sinn der Verwendung von SVG darin besteht, mit der Auflösung zu skalieren. Gibt es eine Möglichkeit, die Größe des Bildes mithilfe von CSS ohne background-imageHack festzulegen?

BEARBEITEN: Hier ist eine Vorschau (großes Bild, das absichtlich für Illustration und Drama ausgewählt wurde): http://jsfiddle.net/tWQ65/4/
Und meine aktuelle background-imageProblemumgehung mithilfe von CSS3 background-size: http://jsfiddle.net/kP375/1/

Möglicherweise möchten Sie das img-Tag ausprobieren, anstatt die Eigenschaft 'list-style-image' festzulegen. Durch Festlegen von Breite und Höhe mithilfe von CSS wird das Bild tatsächlich zugeschnitten. Wenn Sie jedoch das img-Tag verwenden, wird die Größe des Bilds auf den Wert von Breite und Höhe geändert.

Ich würde verwenden:

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

Ich benutze:

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;
}

Dabei legt die Hintergrundgröße die Hintergrundbildgröße fest.

Hier können Sie sehen, wie Layout-Engines die Größe von Listenbildern bestimmen: http://www.w3.org/wiki/CSS/Properties/list-style-image

Es gibt drei Möglichkeiten, dies zu umgehen und gleichzeitig die Vorteile von CSS beizubehalten:

1. Ändern Sie die Größe des Bildes.
2. Verwenden Sie stattdessen ein Hintergrundbild und eine Auffüllung (einfachste Methode).
3. Verwenden Sie eine SVG- viewBoxDatei ohne definierte Größe, die bei Verwendung als list-style-image( Größe ein großes Lob an Jeremy) die Größe auf 1em ändert .

Fast wie beim Betrügen ging ich einfach in einen Bildeditor und veränderte die Bildgröße um die Hälfte. Funktioniert wie ein Zauber für mich.

Dank Chris für den Ausgangspunkt ist hier eine Verbesserung, die sich mit der Größenänderung der verwendeten Bilder befasst. Die Verwendung des ersten Kindes dient nur dazu, anzuzeigen, dass Sie eine Vielzahl von Symbolen in der Liste verwenden können, um Ihnen die volle Kontrolle zu geben.

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;
}

Dies scheint in allen modernen Browsern gut zu funktionieren. Sie müssen sicherstellen, dass die Breite und der negative Rand den gleichen Wert haben. Ich hoffe, es hilft

Ich habe eine Art Terminal-Emulator mit Bootstrapund Javascriptweil ich etwas Dynamik brauchte, um einfach neue Elemente hinzuzufügen, und ich habe die Eingabeaufforderung von gesetzt 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;
}

Ich hoffe das hilft dir.

Ich habe es erreicht, indem ich das Bild-Tag vor das Li gesetzt habe:

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;
     }

Dies ist eine späte Antwort, aber ich stelle sie hier für die Nachwelt auf

Sie können das SVG bearbeiten und seine Größe festlegen. Einer der Gründe, warum ich svg's gerne benutze, ist, dass Sie es in einem Texteditor bearbeiten können.

Das Folgende ist ein 32 * 32-SVG, dessen Größe ich intern geändert habe, um es zunächst als 10 * 10-Bild anzuzeigen. es funktionierte perfekt, um das Listenbild zu ersetzen

<?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>

Ich habe dann einfach folgendes zu meinem CSS hinzugefügt

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

Dies list-style: none;ist wichtig, da verhindert wird, dass das Standardlistenbild angezeigt wird, während das alternative Bild geladen wird.

Hier ist ein Beispiel für das Spielen mit Inline-SVG für eine Listenaufzählung (2020-Browser)

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>")

• Spielen Sie mit SVG width& height, um die Größe einzustellen
• Spielen Sie mit, M70 42um die Hand zu positionieren
• anderes Verhalten auf FireFox oder Chrom!
• entferne das 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 */
}