una - usar atributo alt en html

Tamaño de la imagen de estilo de lista de CSS

Question

Intento establecer iconos de SVG personalizados con CSS en los elementos de la lista de un <ul> . Ejemplo:

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

El problema es que las imágenes son demasiado grandes y estiran la altura de las líneas. No quiero cambiar el tamaño de la imagen, porque el punto de usar SVG es escalar con la resolución. ¿Hay alguna manera de establecer el tamaño de la imagen usando CSS sin algún tipo de corte de background-image de background-image ?

EDITAR: Aquí hay una vista previa (imagen grande elegida deliberadamente para ilustración y drama): http://jsfiddle.net/tWQ65/4/
Y mi solución de background-image actual, usando el background-size de CSS3: http://jsfiddle.net/kP375/1/

Answer 1

Casi como hacer trampa, acabo de entrar en un editor de imágenes y redimensioné la imagen a la mitad. Funciona como un encanto para mí.

Answer 2

Es posible que desee probar la etiqueta img en lugar de establecer la propiedad ''list-style-image''. Establecer ancho y alto usando css realmente recortará la imagen. Pero si usa la etiqueta img, la imagen se redimensionará al valor de ancho y alto.

Answer 3

Estoy usando:

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

donde el fondo establece el tamaño de la imagen de fondo.

Answer 4

Gracias a Chris porque el punto de partida aquí es una mejora que aborda el cambio de tamaño de las imágenes utilizadas, el uso del primer hijo es solo para indicar que puede usar una variedad de iconos dentro de la lista para darle un control total.

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

Esto parece funcionar bien en todos los navegadores modernos, tendrá que asegurarse de que el ancho y el margen negativo que quedan tengan el mismo valor, espero que ayude

Answer 5

Hice una especie de emulador de terminal con Bootstrap y Javascript porque necesitaba algo de dinámica para agregar fácilmente nuevos elementos, y puse el aviso de 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;
}

Espero que esto te ayude.

Answer 6

Por favor prueba esto

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

Answer 7

Puede ver cómo los motores de diseño determinan los tamaños de las imágenes de lista aquí: http://www.w3.org/wiki/CSS/Properties/list-style-image

Hay tres formas de evitar esto mientras se mantienen los beneficios de CSS:

1. Cambiar el tamaño de la imagen.
2. Use una imagen de fondo y relleno en su lugar (método más fácil).
3. Use un SVG sin un tamaño definido usando viewBox que luego se redimensionará a 1em cuando se use como una list-style-image (Felicitaciones a Jeremy).

Answer 8

Yo usaría:

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