CSS list-style-image size
I'm trying to set custom SVG icons with CSS on a <ul>
's list items. Example:
<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>
The problem is that the the images are too large, and stretch the height of the lines. I don't want to change the image size, because the point of using SVG is to scale with the resolution. Is there a way to set the size of the image using CSS without some sort of background-image
hack?
EDIT: Here's a preview (large image deliberately chosen for illustration and drama): http://jsfiddle.net/tWQ65/4/
And my current background-image
workaround, using CSS3's background-size
: http://jsfiddle.net/kP375/1/
Solution 1:
I'd use:
li {
list-style: none;
}
li::before {
content: '';
display: inline-block;
height: y;
width: x;
background-image: url();
}
Solution 2:
I'm using:
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;
}
where background-size set the background image size.
Solution 3:
You can see how layout engines determine list-image sizes here: http://www.w3.org/wiki/CSS/Properties/list-style-image
There are three ways to do get around this while maintaining the benefits of CSS:
- Resize the image.
- Use a background-image and padding instead (easiest method).
- Use an SVG without a defined size using
viewBox
that will then resize to 1em when used as alist-style-image
(Kudos to Jeremy).
Solution 4:
You might would like to try img tag instead of setting 'list-style-image' property. Setting width and height using css will actually crop the image. But if you use img tag, the image will be re-sized to value of width and height.