CSS-Liste-Stil-Bildgröße

Ich versuche mit custom-SVG-icons mit CSS auf eine <ul>'s Liste posten. 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 gross sind, und Strecken Sie die Höhe der Zeilen. Ich will nicht, um die Bildgröße zu ändern, denn der Punkt, der mit SVG skaliert mit der Auflösung. Gibt es eine Möglichkeit, um die Größe des Bildes mit CSS ohne irgendeine Art von background-image hack?

EDIT: Hier eine Vorschau (großes Bild bewusst gewählt, für illustration und Schauspiel): http://jsfiddle.net/tWQ65/4/
Und meine aktuelle background-image workaround, mit CSS3 ist background-size: http://jsfiddle.net/kP375/1/

Kommentar zu dem Problem

InformationsquelleAutor der Frage BitLooter | 2011-10-15

  1. 7

    Vielleicht möchten versuchen img-tag anstelle der Einstellung 'list-style-image" - Eigenschaft. Wenn Sie die Breite und Höhe mithilfe von css wird eigentlich das Bild zu beschneiden. Aber wenn Sie mit einem img-tag, wird das Bild die Größe neu, um den Wert von Breite und Höhe.

    InformationsquelleAutor der Antwort asandeep

  2. 42

    Ich würde verwenden:

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

    InformationsquelleAutor der Antwort Chris

  3. 18

    Können Sie sehen, wie layout-engines bestimmen Liste-Bildgrößen hier: http://www.w3.org/wiki/CSS/Properties/list-style-image

    Gibt es drei Möglichkeiten dies zu umgehen während Sie gleichzeitig die Vorteile von CSS:

    1. Die Größe des Bildes.
    2. Verwenden Sie ein hintergrund-Bild und Polsterung statt (einfachste Methode).
    3. Verwendung eines SVG ohne eine definierte Größe mit viewBox wird dann Größe ändern-1em, wenn verwendet, als ein list-style-image (großes Lob an Jeremy).

    InformationsquelleAutor der Antwort CourtDemone

  4. 5

    Fast wie Cheaten, ich ging einfach in ein Bildbearbeitungsprogramm und verkleinert das Bild um die Hälfte. Funktioniert wie ein Charme für mich.

    InformationsquelleAutor der Antwort Jahmic

  5. 2

    Danke an Chris für den Ausgangspunkt hier ist eine Verbesserung, die die Adressen der Größenänderung der Bilder verwendet, die Verwendung von first-child ist nur anzugeben, Sie könnte verwenden eine Vielzahl der Symbole in der Liste geben Ihnen die volle Kontrolle.

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

    Scheint dies gut zu funktionieren in allen modernen Browsern, die Sie benötigen, um sicherzustellen, dass die Breite und die negativen Rand Links haben den gleichen Wert, hoffe es hilft

    InformationsquelleAutor der Antwort Stedy67

  6. 0

    Habe ich eine Art von terminal-emulator mit Bootstrap und Javascript denn ich brauchte einige dynamische hinzufügen leicht neue Elemente, und ich habe die Aufforderung von 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, dies hilft Ihnen.

    InformationsquelleAutor der Antwort Leonardo Oliva

  7. -13

    Bitte versuchen Sie dies.

    .ul li {width:100px;height:100px}

    InformationsquelleAutor der Antwort Jinesh Jain

Schreibe einen Kommentar