CODEWITHSUNDEEP
htmlcss
user8758206
user8758206

Reputation: 2191

Figcaption width not fitting the image - 'width: fit-content' ineffective

I'm trying to get the 'text here' caption to have the same width as the image. I've added width: fit-content to the caption but it ignores it and sets a width to the text content.

How can this be fixed? Could someone explain what I'm doing wrong here? Thanks for any help.

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>

Upvotes: 0

Views: 59

Answers (1)

Paulie_D
Paulie_D

Reputation: 115108

The caption width has no method of knowing the width of the image.

There is a method using table layout.

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>

Upvotes: 1

Related Questions