Set html figure-width as well as the width of the image it contains

Question

If there is an image inside the curved sign, the width of the figure is 100%. How to make the shape always have the same width as the image? Here is my current code:

HTML:

<figure> <img src="http://www.google.com/images/srpr/logo3w.png" alt="" /> </figure> 

CSS

 * { margin: 0; padding: 0; } figure { border: 1px solid red; } img { border: 1px solid blue; vertical-align: top; } 

Answer 1

Add display:table to figure css like this

 figure { display:table; border: 1px solid red; } 

JS Fiddle Demo

Answer 2

An event, although you did not ask for any JS solution. This is my solution for your problem.

Change image width and height

Assuming the shape is parent to img

  $(document).ready(function(){ $("img").load(function(){ $(this).parent().width( $(this).width()); }); }); 

Answer 3

You can also do this with jquery, although this is a bit of a hack:

 var imgWidth = $("figure img").width(); $("figure").width(imgWidth); 

This fix, if for some reason it is displayed: the table does not work for you in your css stack, or you need this element for a different type of display.