如何格式化figcaption以不拉伸最小宽度图形 [英] 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;
}

我的目标是使图像水平居中并缩放到视口的至少50％，但不超过100％.标题应与图像对齐，并应根据缩放后的图像尺寸进行包装.

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.

当figcaption文本简短时-一切都很好.图片要么放大至50％，缩小至100％，要么保留其原始分辨率.

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.

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

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.

推荐答案

我找到了使用内联表的解决方案:

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

这篇关于如何格式化figcaption以不拉伸最小宽度图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！