Question

我正在尝试使“此处的文字”标题具有与图像相同的宽度。我已经在标题中添加了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>

Figcaption宽度不适合图像-'width：fit-content'无效

1 个答案: