'How to format figcaption to not stretch a min-width figure

I use the following markup to present an image and its caption.

HTML:

<div class="fig-container">
    <figure class="captioned-figure">
        <img class="full-width" src="..."/>
        <figcaption>
            TEXT TEXT TEXT
        </figcaption>
    </figure>
</div>

CSS:

.fig-container{
    text-align: center;
}

.captioned-figure{
    display: inline-block;
    min-width: 50%;
}

.full-width{
    display: block;
    width: 100%;
    height: auto;
}

My goal is to have the image horizontally centered and scaled to at least 50% of the viewport, but to no more than 100%. The caption should be aligned to the image and should wrap according to the scaled image size.

When the figcaption text is short - all is well. The images either scale up to 50%, scaled down to 100%, or left at their native res.

But when the figcaption text is too long (wider than 50% in one row), and the image is small (narrower than 50%), the figcaption sets the actual width of the figure element, and the image is scaled accordingly.

htmlcssimagefigure


Solution 1:[1]

The best / fastest solution would be to add max-width: 50% to the .captioned-figure element.

.fig-container {
  text-align: center;
}

.captioned-figure {
  display: inline-block;
  min-width: 50%;
  max-width: 50%
}

.full-width {
  display: block;
  width: 100%;
  height: auto;
}
<div class="fig-container">
    <figure class="captioned-figure">
        <img class="full-width" src="http://25.media.tumblr.com/tumblr_lhp4ibjZlc1qgnva2o1_500.jpg"/>
        <figcaption>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque laboriosam earum obcaecati incidunt consequatur non molestiae voluptas ratione hic commodi, iure nobis asperiores. Similique, cupiditate, rerum! Aliquid, repellendus itaque amet!
        </figcaption>
    
    </figure>
</div>

What do you think ?

Solution 2:[2]

I found a solution using inline-tables:

.fig-container {
  text-align: center;
}

.captioned-figure {
  display: inline-table;
  min-width: 50%;
}

.full-width {
  display: block;
  width: 100%;
  height: auto;
}

.img-subtitle {
  display: table-caption;
  caption-side: bottom;
}
<div class="fig-container">
  <figure class="captioned-figure">
    <img class="full-width" src="https://via.placeholder.com/400" />
    <figcaption class="img-subtitle">
      TEXT TEXT TEXT
    </figcaption>
  </figure>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 LukyVj
Solution 2 isherwood

Related Questions