CSS列表样式图像大小 [英] CSS list-style-image size

问题描述

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

I'm trying to set custom SVG icons with CSS on a <ul>'s list items. Example:

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

The problem is that the the images are too large, and stretch the height of the lines. I don't want to change the image size, because the point of using SVG is to scale with the resolution. Is there a way to set the size of the image using CSS without some sort of background-image hack?

编辑：以下是预览（图片和戏剧故意选择的大图片）： http://jsfiddle.net/tWQ65/4/

和我目前的 background-image 解决方法，使用CSS3的 background-size ： http://jsfiddle.net/kP375/1/

Here's a preview (large image deliberately chosen for illustration and drama): http://jsfiddle.net/tWQ65/4/
And my current background-image workaround, using CSS3's background-size: http://jsfiddle.net/kP375/1/

推荐答案

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

You might would like to try img tag instead of setting 'list-style-image' property. Setting width and height using css will actually crop the image. But if you use img tag, the image will be re-sized to value of width and height.

这篇关于CSS列表样式图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！