子弹图像自动调整大小答案

【问题标题】：Bullet Image Auto-Sizing子弹图像自动调整大小
【发布时间】：2014-01-20 19:48:46
【问题描述】：

我正在使用 CSS3 进行格式化。我有一个用于子弹的过大图像。我希望项目符号自动调整为字体大小。我能做到吗？

如果不是，（该死）我将如何将图像项目符号设置为特定大小？（如12高度，自动缩放宽度）

    ul {
        list-style-image: url('rectangular_bullet_image.jpg')
    }

【问题讨论】：

为什么要使用 large 图像作为列表项目符号？但如果你希望它可以调整大小，我建议使用自定义字体或 Unicode 字符和li:before。
避免使用 list-style-image - 它让您无法控制图像的位置或大小。改用 CSS 背景。

标签： html image css bulletedlist

【解决方案1】：

如果您希望它缩放到 li 的高度，请使用 Mihnea 解决方案。

如果您希望它缩放到字体大小，请使用

ul li {
    padding-left: 20%;
    background: url('rectangular_bullet_image.jpg') no-repeat left top;
    background-size: auto 1em; 
}

最后一个大小 (1em) 是指字体的大小。所以，如果你想让它比字体稍大，设置1.2em

请注意，如果 li 只有 1 行，则 2 个解决方案大致相同。

是多行的li有区别。

【讨论】：

【解决方案2】：

试试这样的

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    padding-left: 20%;

    background: url('rectangular_bullet_image.jpg') no-repeat left top;
    background-size: 20% 100%; 
}

这是一个小技巧http://jsfiddle.net/YUjdz/1/

【讨论】：