首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS列表样式-图像大小

CSS列表样式-图像大小
EN

Stack Overflow用户
提问于 2011-10-15 11:41:31
回答 7查看 261.5K关注 0票数 92

我正在尝试在<ul>的列表项上设置自定义的SVG图标。示例:

代码语言:javascript
复制
<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-sizehttp://jsfiddle.net/kP375/1/

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2011-10-15 15:54:51

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

票数 15
EN

Stack Overflow用户

发布于 2013-11-16 02:29:24

我会使用:

代码语言:javascript
复制
li {
  list-style: none;
}
li::before {
  content: '';
  display: inline-block;
  height: y;
  width: x;
  background-image: url();
}
票数 90
EN

Stack Overflow用户

发布于 2016-10-13 20:58:36

我使用的是:

代码语言:javascript
复制
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设置背景图像的大小。

票数 57
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7775594

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档