CSS 목록 스타일 이미지 크기

<ul>의 목록 항목 에 CSS로 사용자 정의 SVG 아이콘을 설정하려고 합니다. 예:

<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 사용의 요점은 해상도에 따라 크기를 조정하는 것이기 때문에 이미지 크기를 변경하고 싶지 않습니다. background-image해킹 없이 CSS를 사용하여 이미지 크기를 설정하는 방법이 있습니까?

편집 : 여기에 미리보기가 있습니다 (그림과 드라마를 위해 의도적으로 선택한 큰 이미지) : http://jsfiddle.net/tWQ65/4/
그리고 background-imageCSS3를 사용하는 현재 해결 방법 background-size: http://jsfiddle.net/kP375/1/

'list-style-image'속성을 설정하는 대신 img 태그를 사용해 볼 수 있습니다. 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;
}

여기서 background-size는 배경 이미지 크기를 설정합니다.

여기에서 레이아웃 엔진이 목록 이미지 크기를 결정하는 방법을 확인할 수 있습니다. http://www.w3.org/wiki/CSS/Properties/list-style-image

CSS의 이점을 유지하면서이 문제를 해결할 수있는 세 가지 방법이 있습니다.

1. 이미지 크기를 조정하십시오.
2. 대신 배경 이미지와 패딩을 사용하십시오 (가장 쉬운 방법).
3. 정의 된 크기가없는 SVG를 viewBox사용하면 list-style-image(Kudos to Jeremy) 로 사용될 때 1em으로 크기가 조정됩니다 .

부정 행위와 거의 비슷하게 이미지 편집기에 들어가서 이미지 크기를 절반으로 조정했습니다. 나를위한 매력처럼 작동합니다.

Chris 덕분에 사용 된 이미지의 크기를 조정하는 개선 사항이 있습니다. 첫 번째 자식을 사용하는 것은 목록 내에서 다양한 아이콘을 사용하여 완전한 제어를 제공 할 수 있음을 나타냅니다.

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를 사용하는 것을 좋아하는 이유 중 하나는 텍스트 편집기에서 편집 할 수 있기 때문입니다.

다음은 처음에 10 * 10 이미지로 표시하도록 내부적으로 크기를 조정 한 32 * 32 svg입니다. 목록 이미지를 대체하기 위해 완벽하게 작동했습니다.

<?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;그것을 대체 이미지가로드되는 동안 표시에서 기본 목록 이미지를 방지 중요합니다.

다음은 목록 글 머리 기호에 대해 인라인 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 */
}