I've got a list item with an image inside, for example:
<ul>
<li>
<img></img>
</li>
</ul>
The image does not take up the full width of the li.
How can I get the li width to shrink to the size of its containing image?
-
The ul has a set width...if this has anything to do with it...??user1481563– user14815632012-06-26 06:09:54 +00:00Commented Jun 26, 2012 at 6:09
-
2show your code in jsfiddle.net for better understanding.khurram– khurram2012-06-26 06:14:24 +00:00Commented Jun 26, 2012 at 6:14
Add a comment
|
4 Answers
Do the height of images
<ul>
<li>
<img src="" width="xxx" height="xxx"></img>
</li>
</ul>
Live demo http://jsfiddle.net/CZqEc/
updated live demo http://jsfiddle.net/CZqEc/1/
1 Comment
user1481563
Is it possible to get the li to shrink dynamically though?
If you set your li to display: inline, since li are blocks by default, the width would match the largest/widest element.
Comments
If <li> is display:block or similar (list-item also)
use li img{max-width:100%}
If <li> is display:inline-block or display:inline
you also need to set <li> width
Comments
or try
li
{
background:url('');
display: ;
background-size:xx xx;
}
