html - CSS 列表样式图像大小

Question

我正在尝试使用 CSS 在 <ul> 上设置自定义 SVG 图标的列表项。示例:

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

问题是图像太大，拉伸(stretch)了线条的高度。我不想更改图像大小，因为使用 SVG 的目的是随分辨率缩放。有没有一种方法可以使用 CSS 设置图像的大小而无需某种 background-image破解？

编辑:这是预览(特意选择大图用于插图和戏剧):http://jsfiddle.net/tWQ65/4/
还有我现在的background-image解决方法，使用 CSS3 的 background-size : http://jsfiddle.net/kP375/1/

Answer 1

我会使用:

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