Розмір стилю списку CSS-зображення

Я намагаюся встановити власні піктограми SVG із CSS для <ul>елементів списку. Приклад:

<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злому?

EDIT: Ось попередній перегляд (велике зображення, навмисно вибране для ілюстрації та драми): http://jsfiddle.net/tWQ65/4/
І моє поточне background-imageобхідне рішення, використовуючи CSS3 background-size: http://jsfiddle.net/kP375/1/

Можливо, ви захочете спробувати тег img замість того, щоб встановлювати властивість 'list-style-image'. Встановлення ширини та висоти за допомогою css фактично обрізає зображення. Але якщо ви використовуєте тег img, зображення буде змінено на значення ширини та висоти.

Я б використав:

li{
   list-style: none;
}
li::before{
   content: '';
   display: inline-block;
   height: y;
   width: x;
   background-image: url();
}

Я використовую:

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

де розмір фону встановлює розмір фонового зображення.

Ви можете побачити, як механізми макетування визначають розміри зображень зі списку тут: http://www.w3.org/wiki/CSS/Properties/list-style-image

Є три способи обійти це, зберігаючи переваги CSS:

1. Змініть розмір зображення.
2. Замість цього використовуйте фонове зображення та відступ (найпростіший спосіб).
3. Використовуйте SVG без визначеного розміру, використовуючи viewBoxцей розмір, який потім зменшиться до 1em при використанні як list-style-image(Похвала Джеремі).

Майже як обман, я просто зайшов у редактор зображень і зменшив розмір зображення наполовину. Для мене це працює як оберіг.

Завдяки Крісу за початкову точку, це вдосконалення, яке стосується зміни розміру використовуваних зображень, використання першої дитини лише означає, що ви можете використовувати різноманітні значки у списку, щоб дати вам повний контроль.

ul li:first-child:before {
    content: '';
    display: inline-block;
    height: 25px;
    width: 35px;
    background-image: url('../images/Money.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: -35px;
}

Здається, це добре працює у всіх сучасних браузерах, вам потрібно буде переконатися, що ширина та від’ємне поле мають однакове значення, сподіваємось, це допоможе

Я зробив своєрідний емулятор терміналу, Bootstrapі Javascriptоскільки мені потрібна була певна динаміка, щоб легко додавати нові елементи, я поставив запит від Javascript.

HTML:

  <div class="panel panel-default">
      <div class="panel-heading">Comandos SQL ejecutados</div>
      <div class="panel-body panel-terminal-body">
          <ul id="ulCommand"></ul>
      </div>
 </div>

Javascript:

function addCommand(command){
    //Creating the li tag   
    var li = document.createElement('li');
    //Creating  the img tag
    var prompt = document.createElement('img');
    //Setting the image 
    prompt.setAttribute('src','./lib/custom/img/terminal-prompt-white.png');
    //Setting the width (like the font)
    prompt.setAttribute('width','15px');
    //Setting height as auto
    prompt.setAttribute('height','auto');
    //Adding the prompt to the list item
    li.appendChild(prompt);
    //Creating a span tag to add the command
    //li.appendChild('el comando');   por que no es un nodo
    var span = document.createElement('span');
    //Adding the text to the span tag
    span.innerHTML = command;
    //Adding the span to the list item
    li.appendChild(span);
    //At the end, adding the list item to the list (ul)
    document.getElementById('ulCommand').appendChild(li);
}

CSS:

.panel-terminal-body {
  background-color: #423F3F;
  color: #EDEDED;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  height: 300px;
}

.panel-terminal-body ul {
  list-style: none;
}

Сподіваюся, це вам допоможе.

Я домігся цього, розмістивши тег зображення перед символом li:

HTML

<img src="https://www.pinclipart.com/picdir/big/1-17498_plain-right-white-arrow-clip-art-at-clipart.png" class="listImage">

CSS

     .listImage{
      float:left;
      margin:2px;
      width:25px
     }
     .li{
      margin-left:29px;
     }

Це пізня відповідь, але я розміщую це тут для нащадків

Ви можете редагувати svg та встановлювати його розмір. одна з причин, через яку мені подобається використовувати svg, полягає в тому, що ви можете редагувати її в текстовому редакторі.

Далі наведено формат 32 * 32 svg, розмір якого я внутрішньо змінив, щоб його спочатку відобразили як зображення 10 * 10. він ідеально працював, щоб замінити зображення списку

<?xml version="1.0" ?><svg width="10" height="10"  id="chevron-right" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:#34a89b;" d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"/></svg>

Потім я просто додав у свій css наступне

* ul {
    list-style: none;
    list-style-image: url(../images/chevron-right.svg);
}

Це list-style: none;важливо, оскільки заважає показувати зображення списку за замовчуванням під час завантаження альтернативного зображення.

Ось приклад гри з Inline SVG для маркера списку (браузери 2020)

list-style-image: url("data:image/svg+xml,
                      <svg width='50' height='50'
                           xmlns='http://www.w3.org/2000/svg' 
                           viewBox='0 0 72 72'>
                        <rect width='100%' height='100%' fill='pink'/>
                        <path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3
                                 l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30
                                 m-54 24v-24h9v24z'/></svg>")

• Грайте у SVG width&height щоб встановити розмір
• Грайте, M70 42щоб розташувати руку
• інша поведінка у FireFox або Chromium!
• видалити rect

li{
  font-size:2em;
  list-style-image: url("data:image/svg+xml,<svg width='3em' height='3em'                          xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><rect width='100%' height='100%' fill='pink'/><path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3 3h-12l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30m-54 24v-24h9v24z'/></svg>");
}

span{
  display:inline-block;
  vertical-align:top;
  margin-top:-10px;
  margin-left:-5px;
}

<ul>
  <li><span>Apples</span></li>
  <li><span>Bananas</span></li>
  <li>Oranges</li>
</ul>

.your_class li {
    list-style-image: url('../images/image.svg');
}

.your_class li::marker {
    font-size: 1.5rem; /* You can use px, but I think rem is more respecful */
}