CSS 列表样式图片大小

Question

我正在尝试在 <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 hack？

编辑：这是一个预览（特意为插图和戏剧选择大图）：http://jsfiddle.net/tWQ65/4/
而我目前的background-image 解决方法，使用CSS3 的background-size：http://jsfiddle.net/kP375/1/

Answer 1

这是一个迟到的答案，但我把它放在这里是为了后代

您可以编辑 svg 并设置其大小。我喜欢使用 svg 的原因之一是您可以在文本编辑器中对其进行编辑。

以下是一个 3232 的 svg，我在内部调整了它的大小以最初显示为 1010 图像。它完美地替换了列表图像

<?xml version="1.0" ?><svg width="10" height="10"  id="chevron-right" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:#34a89b;" d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"/></svg>

然后我简单地将以下内容添加到我的 css 中

* ul {
  list-style: none;
  list-style-image: url(../images/chevron-right.svg);
}

list-style: none; 很重要，因为它可以防止在加载备用图像时显示默认列表图像。

Answer 2

我通过在 li 之前放置图像标签来实现它：

---

HTML

<img src="https://www.pinclipart.com/picdir/big/1-17498_plain-right-white-arrow-clip-art-at-clipart.png" class="listImage">

---

CSS

.listImage {
  float:left;
  margin:2px;
  width:25px
}
.li {
  margin-left:29px;
}

Answer 3

.your_class li {
  list-style-image: url('../images/image.svg');
}

.your_class li::marker {
  font-size: 1.5rem; /* You can use px, but I think rem is more respecful */
}

Answer 4

感谢 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 5

我会使用：

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

Answer 6

这是一个使用 Inline SVG 制作列表项目符号的示例（2020 浏览器）

list-style-image: url("data:image/svg+xml,
                      <svg width='50' height='50'
                           xmlns='http://www.w3.org/2000/svg' 
                           viewBox='0 0 72 72'>
                        <rect width='100%' height='100%' fill='pink'/>
                        <path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3
                                 l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30
                                 m-54 24v-24h9v24z'/></svg>")

• 使用 SVG width & height 设置大小
• 玩 M70 42 来定位手
• FireFox 或 Chromium 上的不同行为！
• 删除rect

li{
  font-size:2em;
  list-style-image: url("data:image/svg+xml,<svg width='3em' height='3em'                          xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><rect width='100%' height='100%' fill='pink'/><path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3 3h-12l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30m-54 24v-24h9v24z'/></svg>");
}

span{
  display:inline-block;
  vertical-align:top;
  margin-top:-10px;
  margin-left:-5px;
}

<ul>
  <li><span>Apples</span></li>
  <li><span>Bananas</span></li>
  <li>Oranges</li>
</ul>

Answer 7

我正在使用：

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 8

我用Bootstrap 和Javascript 做了一种终端模拟器，因为我需要一些动态来轻松添加新项目，我把提示来自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;
}

希望对你有所帮助。

Answer 9

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

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

1. 调整图像大小。
2. 改用背景图像和填充（最简单的方法）。
3. 使用 viewBox 使用未定义大小的 SVG，然后在用作 list-style-image 时将大小调整为 1em（感谢 Jeremy）。

Answer 10

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

Answer 11

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