[html] CSS 목록 스타일 이미지 크기

Program / 글쓴이

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

도움이 되었기를 바랍니다.