Сократите <figcaption>до родного брата <img>и держите его отзывчивым

Question

Это проблема проиллюстрирована:

Я хочу сделать границу, которая является тегом рисунка, чтобы соответствовать img.

Это структура HTML:

<div class="container">
    <figure>
        <img src="" alt="">
        <figcaption></figcaption>
    </figure>
</div>

и это css:

figure {
    border: 1px solid $color-light-gray;
    padding: 5px;

    img {
        max-width: 100%;
        height: 100%
    }

    figcaption {
        text-align: center;
    }
}

Answer 1

Используйте display:table на рисунке и display:table-caption на figcaption

Answer 2

Просто масштабируйте изображение по вашему усмотрению, родительский div будет масштабироваться самостоятельно, как

figure {
  border: 1px solid #ccc;
  padding: 5px;

}
img {
  width: 100%;
  height: 100%
}

figcaption {
  text-align: center;
}

<div class="container">
    <figure>
        <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="">
        <figcaption>Caption Caption Caption Caption Caption</figcaption>
    </figure>
</div>

Answer 3

figure {
    border: 1px solid #ccc;
    padding: 5px;
    width: 100%;

    img {
        max-width: 50%;
        min-width: 50%;
        outline: solid 1px black;
    }

    figcaption {
        text-align: center;
        width: 50%;
    }
}

Просто присвойте figcaption необходимую вам ширину.Назначьте max-width на img, если вы хотите, чтобы он прошел только половину пути.