Question

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

如果没有，（darn）我如何将image-bullet设置为特定大小？（例如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个解决方案大致相同。

对于多线路而言，存在差异。

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

heres是一个小提琴http://jsfiddle.net/YUjdz/1/

子弹图像自动调整大小

2 个答案: