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-figure
element.What do you think ?