CSS list-style-image size

Question

J'essaie de définir des icônes SVG personnalisées à l'aide d'une feuille de style (CSS) sur une page d'accueil. <ul> Les éléments de la liste de Exemple :

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

Le problème est que les images sont trop grandes et dépassent la hauteur des lignes. Je ne veux pas changer la taille de l'image, car l'intérêt d'utiliser SVG est de s'adapter à la résolution. Existe-t-il un moyen de définir la taille de l'image à l'aide de CSS sans avoir recours à une sorte d'outil de gestion de l'image ? background-image hack ?

EDIT : Voici un aperçu (grande image délibérément choisie pour l'illustration et la dramatisation) : http://jsfiddle.net/tWQ65/4/
Et mon projet actuel background-image en utilisant la fonction background-size : http://jsfiddle.net/kP375/1/

Answer 1

J'utiliserais :

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

Answer 2

J'utilise :

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

où background-size définit la taille de l'image d'arrière-plan.

Answer 3

Vous pouvez voir ici comment les moteurs de mise en page déterminent la taille des images de la liste : http://www.w3.org/wiki/CSS/Properties/list-style-image

Il existe trois façons de contourner ce problème tout en conservant les avantages de CSS :

1. Redimensionner l'image.
2. Utilisez plutôt une image de fond et un remplissage (méthode la plus simple).
3. Utiliser un SVG sans taille définie en utilisant viewBox qui sera alors redimensionné à 1em lorsqu'il sera utilisé en tant que list-style-image (Bravo à Jeremy).

Answer 4

Essayez d'utiliser un <img /> au lieu de définir la balise list-style-image propriété. La définition de la propriété width y height en CSS recadreront l'image, mais si vous utilisez une propriété <img /> l'image peut être redimensionnée en utilisant la valeur spécifiée par la balise width y height les propriétés (CSS) ou les attributs (HTML) de ce fichier <img /> élément.

Answer 5

Merci à Chris pour le point de départ, voici une amélioration qui traite du redimensionnement des images utilisées, l'utilisation de first-child est juste pour indiquer que vous pourriez utiliser une variété d'icônes dans la liste pour vous donner un contrôle total.

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

Cela semble fonctionner correctement dans tous les navigateurs modernes, vous devrez vous assurer que la largeur et la marge négative à gauche ont la même valeur, j'espère que cela vous aidera.