CSS 목록 스타일 이미지 크기

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

---

이것은 늦은 답변이지만 후손을 위해 여기에 넣습니다

You can edit the svg and set its size. one of the reasons I like using svg's is because you can edit it in a text editor.

The following is a 32*32 svg which I internally resized to initially display as a 10*10 image. it worked perfectly to replace the list image

<?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>

I then simply added the following to my css

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

The list-style: none; is important as it prevents the default list image from displaying while the alternate image is being loaded.

참고URL : https://stackoverflow.com/questions/7775594/css-list-style-image-size