如何格式化figcaption以不拉伸最小宽度的图形

Question

我使用以下标记来呈现图像及其标题。

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

我的目标是使图像水平居中并缩放到视口的至少50%，但不超过100%。标题应与图像对齐，并应根据缩放后的图像大小进行换行。

当figcaption文本很短时，一切都很好。这些图像要么放大到50%，要么缩小到100%，要么保留其原始分辨率。

但是，当figcaption文本太长(一行中宽于50%)，而图像很小(窄于50%)时，figcaption会设置图形元素的实际宽度，并相应地缩放图像。

Answer 1

最好/最快的解决方案是将max-width: 50%添加到.captioned-figure元素中。

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

你觉得怎么样？

Answer 2

我发现了一个使用内联表的解决方案：

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