css - 将 <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，在figcaption中使用display:table-caption