1

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.

2 Answers 2

0

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 ?

1
  • It's possible, but it will sometime break the caption unnecessarily - if the image width is bigger than 50% and caption is long enough...
    – Niro
    Commented Jan 2, 2017 at 13:49
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.