Размер изображения в стиле списка CSS

Ответ 1

Возможно, вы захотите попробовать img tag вместо установки свойства list-style-image. Установка ширины и высоты с помощью css фактически обрезает изображение. Но если вы используете тег img, изображение будет изменено до значения ширины и высоты.

Ответ 2

Я бы использовал:

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

Ответ 3

Я использую:

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

Ответ 4

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

Существует три способа обойти это, сохранив преимущества CSS:

• Измените размер изображения.
• Вместо этого используйте фоновое изображение и дополнение (самый простой метод).
• Используйте SVG без определенного размера, используя viewBox, который затем изменит размер до 1em при использовании в качестве list-style-image (Kudos to Jeremy).

Ответ 5

Почти как обман, я просто зашел в редактор изображений и изменил размер изображения наполовину. Работает как прелесть для меня.

Ответ 6

Спасибо Крису за отправную точку здесь, это улучшение, которое касается изменения размера используемых изображений, использование первого ребенка - это просто указание, что вы можете использовать различные значки в списке, чтобы дать вам полный контроль.

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

Это, по-видимому, хорошо работает во всех современных браузерах, вам нужно убедиться, что ширина и отрицательная маржа остались одинаковыми, надеюсь, что это поможет

Ответ 7

Я сделал своего рода эмулятор терминала с 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;
}

Надеюсь, это поможет вам.

Ответ 8

Я достиг этого, поместив тег image перед 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;
     }

Ответ 9

Это поздний ответ, но я выкладываю его сюда для потомков

Вы можете редактировать 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; важен, поскольку он предотвращает отображение изображения по умолчанию во время загрузки альтернативного изображения.

Ответ 10

Пожалуйста, попробуйте это.

.ul li {width:100px;height:100px}