How to make the width of the image title equal to the image width?

Question

I am trying to style this:

<div class="figure"> <img src="/some/image.jpg"> <p class="caption"> <span class="caption-text">Some caption of any length</span> </p> </div> 

So, the title is in a shaded field of the same width as the image. Note that .figure can sometimes be inside a <td> in a table, in case that matters. It should also not exceed the width of the parent element (scaling the image if necessary).

Here is what I still have:

 .caption-text { font-size: 14px; font-family: Lato, proxima-nova, 'Helvetica Neue', Arial, sans-serif; font-weight: normal; line-height: 0px; } .figure { max-width: 100%; display: inline-block; position: relative; } .figure img { vertical-align: top; margin-bottom: 3px; } .caption { display: block; width: 100%; position: absolute; padding: 10px; background-color: #e3e3e3; box-sizing: border-box; margin: 0; } 

 <div style="width:500px"> <h1>Some Title</h1> <!--part I want to style--> <div class="figure"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> <p class="caption"> <span class="caption-text">Some caption of any length. Should wrap and push content down when longer than the image.</span> </p> </div> <p>Some text which should always go below the caption. When positioned absolutly the caption overlays this text, instead of pushing it down below.</p> </div> 

The problem is that setting .caption as position:absolute; makes it no longer affect the flow of other elements, so it overlaps the content below it, rather than pushing it.

The html markup is automatically generated and I have no way to edit it, so I would like to know if this is possible with pure css .

Answer 1

You can use 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=""> <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=""> <figcaption class="figcaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption> </figure>