Fit tightly around enclosed image?

Question

The situation is I have an img and I want a pop-over caption-box whose width is the width of the img. I can't add the caption as a child of the img, because img tags don't take children. Hence my idea was to have something like this:

<div>
   <img/>
   <div>
      ...caption...
   <div>
</div>

The problem is the outer divs expand to fill the width of their parent, as block elements do, and hence the caption-div becomes equally wide, and I get something that looks like this:

Where the outer div becomes the width of the page, the caption follows the width of the outer div and thus sticks out of the image.

I do not want to manually set the width of the outer div, because I am using this sub-template for images of all shapes and sizes all over the site. Is there anyway to make the outer-div hug the image, rather than fill his parent?

Answer 1

I do not want to manually set the width of the outer div, because I am using this sub-template for images of all shapes and sizes all over the site. Is there anyway to make the outer-div hug the image, rather than fill his parent?

You need display: inline-block combined with text-align: center.

See: http://jsfiddle.net/thirtydot/V3XyK/

HTML:

<div class="imageContainer">
    <div>
        <img src=".." />
        <span>...caption...</span>
    </div>
</div>

CSS:

.imageContainer {
    text-align: center;
}
.imageContainer img {
    display: block;
}
.imageContainer div {
    position: relative;
    display: inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1;
}
.imageContainer span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #000;
    background: rgba(0,0,0,.5);
}

Answer 2

Perhaps just make the the div width 1px and do overflow: visible

Answer 3

This is it. Unlike the answer above, it will work in IE:

<style type="text/css">
     .outerCont {height:auto;width:auto;position:relative;z-index:1;margin:0px auto;overflow:hidden;display:inline;float:left;}
     .outerCont img {height:auto;width:auto;position:relative;z-index:2;}
     .comment {height:auto;width:100%;display:block;font-family:Arial, Helvetica, sans-serif;text-align:center;padding:10px;0px;10px;0px;color:#FFF;position:absolute;z-index:3;bottom:0;/*also set your semi transparent black background-image here using the background-image property*/}
 </style> 

You would use it like this:

<div class="outerCont">
    <img src="flower.jpg" /> <!--Or where ever the image is located -->
    <div class="comment">
        <p>Hello</p>
    </div>
</div>

The only issue that comes with both the ways above (mine and the other dude's) is that you sacrifice centering the image. In order to center the image you would have to creative a JavaScript using jQuery and use the CSS property to change widths and heights according to there inner content. What you are asking is for us to 'Shrink Wrap' a div to its contents, which is only something you can do in 3 special cases. Floated objects, Inline or Inline-Block objects, and and Absolutely positioned objects. Both Floated and Absolute objects cannot be centered without the use of JavaScript, and Inline Block doesn't act correctly in IE, meaning you need to use display:inline; float:left; for it to work like inline-block. You could center the image with JavaScript, and that's it. I can provide that code, but only upon request.