收缩 兄弟姐妹并保持敏感

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

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所需的宽度即可。如果你只想让它走到一半，就把amax-width分配给img。

Answer 2

在图中使用display:table，在display:table-caption使用figcaption

Answer 3

只需根据您的方便来扩展您的图像，父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>