How to Make Image Caption Width to Match Image Width

How to make image caption width to match image width?

You can use the CSS display:table + table-caption solution.

.figure {
  display: table;
  margin: 0;
}

.figure img {
  max-width: 100%;
}

.figcaption {
  display: table-caption;
  caption-side: bottom;
  background: pink;
  padding: 10px;
}

<h3>Example of small image</h3>
<figure class="figure">
  <img src="//dummyimage.com/300x100" alt="Sample Image">
  <figcaption class="figcaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>

<h3>Example of large image</h3>
<figure class="figure">
  <img src="//dummyimage.com/900x100" alt="Sample Image">
  <figcaption class="figcaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>

Make caption take width of image

Updated Code
https://jsfiddle.net/harshapache/sLeab4zg/

   figure {
      position: relative;
      display: table-caption;
   }

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

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;
}

How to get img to be the same width as figcaption?

Setting max-width: 100%; display: inline-block; (http://jsfiddle.net/vZpmq/1/) or float: [left|right] (http://jsfiddle.net/cdmU3/1/) on the section would cause it to shrink-to-fit it's content (and the box it's in). You might need to rework some other things to fit those changes, though.

Alternatively, try setting width: 100%; height: auto; on the img, and set the width on the figure element? http://jsfiddle.net/9yUsP/

(setting height: auto; on the img means it's retain it's aspect ratio regardless of height or width attributes set on the img element itself)

Limiting caption to width of the image

One method would be to make your figure elements flex containers, and set their alignment to flex-direction: column. This would give you more control over the width of the entire element.

.flex-container {  padding: 0;  margin: 0;  list-style: none;  display: flex;  flex-flow: row wrap;  justify-content: flex-start;}.flex-figure-item {  padding: 5px;  margin-top: 10px;  line-height: 10px;  font-weight: bold;  font-size: 1em;        display: flex;           /* NEW */  flex-direction: column;  /* NEW */  width: 150px;            /* NEW */}figcaption {  color: black;}

<div class="flex-container">  <figure class="flex-figure-item">    <img src="https://placehold.it/150x200" alt="placeholder">    <figcaption>Short, John</figcaption>  </figure>  <figure class="flex-figure-item">    <img src="https://placehold.it/150x200" alt="placeholder">    <figcaption>WrapMe, Longname should not go past right side of image</figcaption>  </figure>  <figure class="flex-figure-item">    <img src="https://placehold.it/150x200" alt="placeholder">    <figcaption>Short, Sally</figcaption>  </figure></div>

How to match width of text to width of dynamically sized image/title?

Make the container inline-block (or any shrink-to-fit configuration like table,inline-grid,inline-flex, float,absolute etc) then force the width of text to be 0 so the width of the container is defined by the image (the text doesn't contribute to the width) then force the width again to be 100% using min-width

.parent {
  background: pink;
  display:inline-block;
}

img {
  display: block;
  max-height: 70vh;
}

.description {
  width:0;
  min-width:100%;
}

<div class="parent">
    <img src="https://picsum.photos/id/1004/900/600">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

Can a figcaption be restricted to the width of a responsively sized image?

I came across the same issue and was able to come up with a fairly neat solution, inspired by this.

HTML:

<figure>
   <img src="http://www.placehold.it/300x150" alt="" />
   <figcaption>Make me as long as you like</figcaption>
</figure>​

CSS:

figure {
   display: table;
   padding: 5px;
   background-color: #fff;
   font-size: .875em;
   
}

figure img {
   display: block;
   max-width: 100%;
}

figcaption {
   display: table-caption;
   caption-side: bottom;
   background: #fff;
   padding: 0 5px 5px;
}​

This ensures the figcaption does not exceed the width of the figure, whilst allowing you to keep max-width on the image. Works in all good browsers and IE8+.

The figure's width will be whatever the native width of the image is, unless that width is restricted in some other way.

---

Related Topics