How to make image caption width to match image width?

by

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="https://dummyimage.com/300x100" alt="">
  <figcaption class="figcaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>

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

In addition, to remove the tiny white space below the image, you can either use:

.figure img { vertical-align: middle; } or .figure img { display: block; }

Read this answer for more details.

More Related Contents:

  1. How to collect and manipulate data in HTML using
  2. My inline-block elements are not lining up properly
  3. How can I select the last element with a specific class, not last child inside of parent?
  4. Responsively change div size keeping aspect ratio [duplicate]
  5. Why media queries has less priority than no media queries css
  6. Flexbox fill available space vertically
  7. Outline radius?
  8. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  9. Easier way to create circle div than using an image?
  10. Customizing Increment Arrows on Input of Type Number Using CSS
  11. Remove outline from select box in FF
  12. How to wrap text of HTML button with fixed width?
  13. Image width/height as an attribute or in CSS? [duplicate]
  14. What’s default HTML/CSS link color?
  15. masking image with CSS
  16. CSS: stretching background image to 100% width and height of screen?
  17. Can overflow:hidden affect layout?
  18. How to insert spaces/tabs in text using HTML/CSS
  19. CSS – Sticky footer [duplicate]
  20. How to Make A Chevron Arrow Using CSS?
  21. Two div blocks on same line
  22. Change the column order in a css grid
  23. :before && :after pseudo elements not showing Firefox
  24. @font-face not working with specific version of Internet Explorer 11
  25. How to change cursor color without changing text color?
  26. Making a div that covers the entire page
  27. Rendering a hierarchy of “OPTION”s in a “SELECT” tag
  28. Dashed border not showing in firefox [duplicate]
  29. How to calc() the number of rows in a grid template?
  30. Using sprites with IMG tag?

Leave a Comment