css - 收缩兄弟姐妹并保持响应

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;
    }
}

标签： cssfigure

Answer 1

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-widthto 。img