DIV width to match image width automatically?

Hi,

Is there any way to create a wrapper DIV that automatically matches the image's width?

I would use this wrapper for all my images (which have various widths). The DIV will be placed within text/context and will appear in the middle, so no text around anywhere...

My CSS for it so far is:

.wrp01{margin: auto; padding: 20px 0px 20px 0px; border: none;}

Code (markup):

Too bad there is no "width: auto;" option.

 

If the container only has that image in, there's zero reason to even be putting a container in the first place.
And by the way, padding: 20px 0px 20px 0px is functionally identical to padding:20px 0.

 

As images are pixel width, fixing the width to that of an image probably means broken layout methodology...

... as Wiicker95 said, if all that's in the DIV is an image, why put a DIV around it. Likewise the redundant padding is a bit wonky...

IF there is a legitimate reason to have a wrapper (like other content in there with the IMG) a float or inline-block will shrink to fit -- the float may or may not be an option depending on your positioning, and remember that legacy IE can only display:inline-block; an inline-level element (like A or SPAN) -- which a DIV is decidedly not!

Of course, the vague/meaningless class name isn't helping either!

 

I think if you want to make the outer automatically re size based on image's width then it is necessary for you to use bootstrap css , because it would automatically fit with your image's size

 

I kind-of found another solution. Problem solved