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.
                        
The best / fastest solution would be to add
max-width: 50%to the.captioned-figureelement.What do you think ?