Автоматическое изменение размера изображения пули

Я форматирую с помощью CSS3. У меня слишком большое изображение, которое я использую для пуль. Я хочу, чтобы размер маркера автоматически изменялся до размера шрифта. Могу ли я сделать это?

Если нет, (черт возьми), как бы я установить изображение пули на определенный размер? (Например, высота 12 и ширина в автоматическом режиме)

    ul {
        list-style-image: url('rectangular_bullet_image.jpg')
    }
Источник

2 ответа

Решение

Если вы хотите, чтобы он масштабировался до высоты li, используйте решение Mihnea.

Если вы хотите, чтобы он масштабировался до размера шрифта, используйте

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

где последний размер (1em) относится к размеру шрифта. Итак, если вы хотите, чтобы он был немного больше шрифта, установите 1.2em

Обратите внимание, что 2 решения примерно одинаковы, если в li есть только 1 строка.

Это для многострочного li, что есть разница.

Источник

Попробуй что-нибудь подобное

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/

Источник
Другие вопросы по тегам