图说明宽度不适合图像 - 'width: fit-content'无效

Question

我正在尝试使"text here"标题与图像具有相同的宽度。我在标题中添加了width: fit-content，但它忽略了它，并为文本内容设置了宽度。

如何解决这个问题？有人能解释一下我在这里做错了什么吗？谢谢你的帮助。

img {
max-width: 488px;
width: 526px;
max-height: 338px;
}
figure {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column wrap;
}
figcaption {
background-color: #e0e0e0;
padding: 4px;
font-size: 85%;
width: fit-content;
}

<figure>
<img border="0" height="364" src="https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg">
<figcaption>Text Here</figcaption></figure>

Answer 1

标题宽度没有知道图像宽度的方法。

有一种方法使用table布局。

img {
max-width: 488px;
width: 526px;
max-height: 338px;
display: block;
}
figure {
text-align: center;
display: table;
width: 1%;
}
figcaption {
background-color: #e0e0e0;
padding: 4px;
font-size: 85%;
}

<figure>
<img border="0" height="364" src="https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg">
<figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati excepturi maiores saepe temporibus libero consequuntur rem, nemo repellat adipisci ea?</figcaption>
</figure>