CSS list-style-image size

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>

问题是图像太大,并拉伸线条的高度.我不想改变图像大小,因为使用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();
}

Answer 2

我正在使用:

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

其中background-size设置背景图像大小.

Answer 3

您可以在此处查看布局引擎如何确定列表图像大小:http://www.w3.org/wiki/CSS/Properties/list-style-image

在保持CSS优势的同时,有三种方法可以解决这个问题:

1. 调整图像大小.
2. 使用背景图像和填充(最简单的方法).
3. 使用没有定义大小的SVG viewBox,然后在用作list-style-image(Kudos to Jeremy)时将其大小调整为1em .

Answer 4

您可能想尝试使用img标签而不是设置'list-style-image'属性.使用css设置宽度和高度实际上会裁剪图像.但是如果你使用img标签,图像将被重新调整为宽度和高度的值.

Answer 5

感谢 Chris 在这里的起点是解决所用图像大小调整的改进，使用 first-child 只是为了表明您可以使用列表中的各种图标来让您完全控制。

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

这似乎适用于所有现代浏览器，您需要确保宽度和左边距具有相同的值，希望它有所帮助

Answer 6

几乎像作弊一样,我只是进入了图像编辑器并将图像调整了一半.对我来说就像一个魅力.