unhack
unhack

Reputation: 1766

How can I make the width of my <figcaption> match the width of the <img> inside its <figure> tag?

Say, I got this code:

<figure>
 <img src="bunnyrabbit.jpg" width="200" height="150" alt="An image of a bunny rabbit." />
 <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>

If I don't use any CSS the figcaption will expand the width of the figure element beyond 200px. How can I prevent this?

I know I can force the text inside the figcaption to wrap by specifying the width of the figure element (<figure style="width:200px;">) but I don't really want to use this for each and every image.

Upvotes: 78

Views: 51928

Answers (7)

user722951
user722951

Reputation: 1

Here is an alternative using display inline-table and display table-caption (include the box-sizing) ... https://codepen.io/keith-purtell/pen/LYMWWPd

<div class="container">
  <h3>Adapted from Mihovil Ilakovac</h3>
  <h3>With <code>display:inline-table</code></h3>
  <p>Just when you thought all the table nonsense was gone.</p>
 <figure>
    <img src="http://placehold.it/600x300"
         alt="Amazing really"
  <figcaption>
Lorem ipsum dolor sit amet consectetur adipisicing elit.  Lorem ipsum dolor sit amet consectetur adipisicing elit.  Lorem ipsum dolor sit amet consectetur adipisicing elit.     </figcaption>
  </figure>
</div>

*, :before, :after {
  box-sizing: border-box;
  /* Be sure to include this! */
}
.container { 
  width:960px;
  margin:10px auto;  
}
figure {
  display: inline-table;
  margin: 1em 0 1.3em 0;
  padding: 0em;
  position: relative;
  width: 66%;   
  }  
img {
 display:block;
    }
figcaption {
  display: table-caption;
  caption-side: bottom;
  font-size: .9rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  margin: 0.7em auto;
  text-align: center;
    }

Upvotes: 0

Marcin Domański
Marcin Domański

Reputation: 11

figure {
    display: inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
}

figcaption {
    width: 0;
    min-width: 100%;
}

demo: https://codepen.io/kartofelek007/pen/rNZWpjp

you may also use this technique for height: https://codepen.io/kartofelek007/pen/LYQJJPR

Upvotes: 1

Danield
Danield

Reputation: 125463

Another solution: Use Intrinsic width

Just set width: min-content; on the figure element

DEMO (Except for IE)

figure {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
<figure>
  <img src=" http://placehold.it/200x150" width="200" height="150" alt="An image of a bunny rabbit." />
  <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>

NB: Browser Support is OK, except for IE, however they are considering implementing this

Upvotes: 26

Rich Wertz
Rich Wertz

Reputation: 11

This was really bothering me, because I wanted to find an answer to accommodate an upgrade to HTML5 that would successfully replace my original setup of displaying images and captions- a table with two rows (or one if no caption was available).

My solution might not work for everyone, but so far, it seems to do just fine in the major browsers (O, FF, IE, S, C), as well as being responsive on mobile devices:

figure {
border: 0px solid #000;
display: table;
width: 0;
}

The idea here is that figure is pushed into existence by the width of the img and so doesn't need any kind of direction.

figure img {
display: block;
}

This is used to rid ourselves of the useless, unsightly gap between the bottom of img and the bottom of figure.

figcaption {
text-align: left;
}

Now that figure has been pushed open just wide enough to let img in, figcaption text has only that limited amount of space in which to exist. text-align is not required for this solution to function.

This solution works as well as display: table-caption, but keeps figcaption contained in any border or background value that might need to be set.

Upvotes: 1

Marco Rohner
Marco Rohner

Reputation: 839

Adding this Code to <figure> and <figcaption> CSS-Attributes helped me with the same problem. Also, it preserves the responsivenes of your images and captions.

figure { display: table; }


figcaption { display: table-caption; caption-side: bottom ; }
  1. Adding display: table; sets the stage.

  2. Adding display: table-caption; alone placed the caption on top of the image, The caption-side property specifies the placement of the table caption at the bottom, top is default.

Upvotes: 73

Michael McGinnis
Michael McGinnis

Reputation: 1019

Unfortunately, setting the width of the figure instead of using max-width: 100% means that it won't shrink on narrow (mobile) devices. That is, the images will not be responsive. I resorted to inserting <br /> to break up long captions, but I didn't like it. But this obscure CSS feature seems to work for me:

figcaption { display: run-in; width: 150px }

This keeps the image responsive, even though the caption isn't. You can pick your own caption width. I also added margin: auto; text-align: center; to center the caption on a mobile device.

Upvotes: 2

robertc
robertc

Reputation: 75707

This will place the figcaption side by side with the img:

figure {
    display: table;
}
img, figcaption {
    display: table-cell;
    vertical-align: bottom;
}
figcaption {
    padding-left: 4px;
}

Here's an example. However I'm not entirely clear what you're trying to achieve - you say in the question that you want the figure to stay at 200px width, but then you comment that you want the figcaption to appear to the right, which would make the figure wider. If all you want is for the figcaption to be restricted to the width of the image, this should work:

figure {
    display: table;
    width: 1px; /* This can be any width, so long as it's narrower than any image */
}
img, figcaption {
    display: table-row;
}

Upvotes: 34

Related Questions