CSS列表样式图像大小

我试图在<ul>的列表项上用CSS设置自定义SVG图标。例如：CSS列表样式图像大小

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

来源

2011-10-15 BitLooter

图标字体是一个很好的技巧http://stackoverflow.com/questions/13129995/how-to-use-icon-fonts/13130383#13130383并可能涵盖一些案例 –

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

来源

2011-10-15 07:54:50 asandeep

+12

图像标记的问题是它更难如果我为不同的行重用一些图标，稍后再进行更改。它还混合了内容和演示文稿，我尽可能避免出现这种情况。不过，如果没有其他方法正确，我会记住它。 – BitLooter

-13

请试试这个。

.ul li {width:100px;height:100px}

来源

2011-10-15 10:35:34

这只会让事情变得更糟，不仅它仍然是垂直拉伸，它现在正在水平压扁，同时为图像做千斤顶。经过Chrome和Opera测试。 – BitLooter

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

来源

2013-07-16 09:30:46 Jahmic

这里你可以看到引擎如何布局确定一览图像尺寸：http://www.w3.org/wiki/CSS/Properties/list-style-image

有三种方式解决此获得，同时保持CSS的好处：

调整图像大小。
改为使用背景图像和填充（最简单的方法）。
使用一个没有定义大小的SVG使用viewBox，然后将其作为list-style-image（杰瑞米的荣誉）使用时调整为1em。

来源

2013-10-22 21:32:13 CourtDemone

从链接的W3C文档中的规则看来，最好的解决方案实际上是从SVG文件中删除'width'和'height'声明。 – Jeremy

这就是我正在用＃3得到的，虽然正如我所说的，我不确定这是如何完成的，看到SVG文档通常需要基于声明的文档高度和宽度的X和Y坐标。 – CourtDemone

那么，如果你有一个没有声明宽度和高度的SVG图像，而是一个'viewBox'，我想你会得到想要的效果。在浏览器中单独查看图像会填满窗口（保留宽高比），所以我想象一个'list-style-image'，它将填充可用空间，即'1em'。 – Jeremy

我会使用：

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

来源

2013-11-15 18:29:23 Chris

没有工作，我甚至尝试'background-size：16px auto;' – BillyNair

'background-size：contains'是更好的选择，但我不知道为什么它不适合你。我将所有SVG图像的高度和宽度设置为100％，除非您在SVG中设置了这些图像，否则某些浏览器很有趣。 – Chris

'.ladybug { \t list-style：none; } .ladybug：之前{ \t内容：''; \t display：inline-block; \t身高：1em; \t width：1em; \t background-image：url（http://www.openclipart.org/people/lemmling/lemmling_Ladybug.svg）; \t background-size：contains; \t background-repeat：no-repeat; }'这样做的好处是您可以调整大小，甚至可以独立进行动画制作。我知道它在Firefox和Chrome中适合我。 – Chris

感谢Chris对于这里的出发点是解决了图像使用的大小调整改进，使用第一代孩子只是为了表示你可以使用列表中的各种图标可以完全控制。

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

这似乎在所有现代浏览器很好地工作，你将需要确保宽度和左缘阴性具有相同的价值，希望它有助于

来源

2016-05-20 12:56:21 Stedy67

我做了一种终端仿真器与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; 
}

我希望这可以帮助您。

来源

2016-10-09 00:55:21

我使用：

li { 
 
\t margin: 0; 
 
\t padding: 36px 0 36px 84px; 
 
\t list-style: none; 
 
\t background-image: url("../../images/checked_red.svg"); 
 
\t background-repeat: no-repeat; 
 
\t background-position: left center; 
 
\t background-size: 40px; 
 
}

哪里背景大小设置背景图片的大小。

来源

2016-10-13 12:58:35 Franky

CSS列表样式图像大小

回答

相关问题