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.

回答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 ?

回答2:

I found a solution using inline-tables:

HTML:

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

CSS:

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

来源：https://stackoverflow.com/questions/41427894/how-to-format-figcaption-to-not-stretch-a-min-width-figure

标签

html

css

image

figure