Issue
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
Try using a <img />
tag instead of setting the list-style-image
property. Setting the width
and height
properties in CSS will crop the image, but if you use a <img />
tag, the image can be re-sized using the value specified by width
and height
(CSS) properties or (HTML) attributes for that <img />
element.
Answered By - asandeep
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.