html - 子弹图像自动调整大小

Question

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

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

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

Answer 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 来说是有区别的。

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