-1

I want to implent images with captions that can go inside content, could be left, right and center aligned.

Parent div has dynamic width, image has dynamic.

How to implement that?

I have tried next thing:

<div class="col-lg-4">
    <div class="image" style="display:table;">
    <img src="foo.jpg" alt="" />
    <div style="display:table-caption;caption-side:bottom;">This is the caption.</div>
</div>
</div>

But at first it doesn't work in FF for images that has width more than parent div.col-lg-4 So with this approach, images should has fixed width, or parent block with display:table. So there is no sense in using that table and table-caption properties. Because you can set width and doesn't use them.

2
  • 1
    Asking for “best way” (without even specifying criteria) is primarily opinion-based, especially since there are so many possible approaches here. Oct 28, 2013 at 20:00
  • Suppose this question's title can be reworded as "Dynamically sized images with captions" or something of that sort
    – tastybytes
    Oct 31, 2013 at 14:05

2 Answers 2

3

My preferred way is using figure and figcaption

http://jsfiddle.net/3n1gm4/rfsYy/

<figure>
    <img src="animageURL.jpg" alt="an image" />

    <figcaption>The images caption woo woo</figcaption>
</figure>

figure is a block level element so you need to set it to display: table and width: 1% (could be 1px also) to cause it to stretch but be rigid at the same time

figure {
    margin: 10px;
    padding: 10px;
    background: #ccc;
    display: table;
    float: left;
    width: 1%;
}
5
  • Imaging you have 30 such an images, these images shouldn't have width, as well as their parent block, because we have responsive layout. How you could implement this. In my question i mentioned, that parent block and image should have dynamic width.
    – Rantiev
    Oct 28, 2013 at 20:15
  • For dynamic images sizes i would use "display: inline-block for dynamic sizes" (like in the fiddle) the example I gave here in code was for the fixed sized images.
    – tastybytes
    Oct 28, 2013 at 20:32
  • Thanks for the replies, I will try fiddler's link tomorrow. I think display:inline-block on parent element wdouldn't work with long caption, if you meant display:inline-block for image, heh... will try, but it seems then caption will in wrong place.
    – Rantiev
    Oct 28, 2013 at 22:47
  • jsfiddle.net/8E2T7/3 Here is what oyu will get if you will have a longer caption with parent display:inline-block, so this is the problem. If we would't set parent block width, we can't use long strings in captions. If we use display:table + display:table-caption, we can't make image fit in parent block, if it has bigger initial width.
    – Rantiev
    Oct 30, 2013 at 8:12
  • I've updated my answer and fiddle to your constraints
    – tastybytes
    Oct 30, 2013 at 20:22
0

As mentioned, the figure/figcaption is ideal in this situation.

JSFiddle

<div class="wrapper">
    <figure>
        <img src="http://lorempixel.com/100/100/" alt=""/>
        <figcaption>Text 1</figcaption>
    </figure>
    <figure>
        <img src="http://lorempixel.com/200/200/" alt=""/>
        <figcaption>Text 2</figcaption>
    </figure>
    <figure>
        <img src="http://lorempixel.com/50/50/" alt=""/>
        <figcaption>Text 3</figcaption>
    </figure>

</div>

For responsiveness, set the figures to inline-block.

.wrapper { /* just an example */
    width:90%;
    border:1px solid grey;
}

figure {
    display:inline-block;
    vertical-align:top;
}

figure img {
    display:block;
}
4
  • Thank you, will try it tomorrow, and will reply.
    – Rantiev
    Oct 28, 2013 at 22:48
  • Here is your example with longer captions jsfiddle.net/KMctL/1
    – Rantiev
    Oct 30, 2013 at 8:13
  • Here's a quick update with the images centered. jsfiddle.net/Paulie_D/KMctL/2 Obviously, if you want to limit any width, you have to apply it manually.
    – Paulie_D
    Oct 30, 2013 at 9:41
  • If you will try my code snippet from questions description, you will mention that caption content, wouldn't exceed parent block whether width was setted for it or not. So the questions is how to combine that one solution with another, that wouldn't allow image to exceed parent width.
    – Rantiev
    Oct 30, 2013 at 19:28

Not the answer you're looking for? Browse other questions tagged or ask your own question.