问题描述

我试图在<ul> 的列表项目中设置带有 CSS 的自定义 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/

最佳解决方案

您可能想尝试使用 img 标签，而不是设置’list-style-image’ 属性。使用 CSS 设置宽度和高度实际上会裁剪图像。但是，如果使用 img 标签，则图像将以宽度和高度为单位进行 re-sized 。

次佳解决方案

我会用：

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

第三种解决方案

您可以看到布局引擎如何确定 list-image 的尺寸：http://www.w3.org/wiki/CSS/Properties/list-style-image

有三种方法来解决这个问题，同时保持 CSS 的好处：

  1. 调整图像大小

  2. 使用 background-image 和填充 (最简单的方法) 。

  3. 使用 viewBox 使用没有定义大小的 SVG，当用作 list-style-image(对 Jeremy)) 时，将重新调整为 1em 。

第四种方案

几乎像作弊一样，我刚进入一个图像编辑器，并将图像大小调整一半。像我一样的魅力。

第五种方案

我在用着：



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 设置背景图像大小。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。