将 <figcaption> 缩小到同级 <img> 并保持响应答案

【问题标题】：Shrink <figcaption> to sibling <img> and keep it responsive将 <figcaption> 缩小到同级 <img> 并保持响应
【发布时间】：2018-10-15 17:59:55
【问题描述】：

这是说明的问题：

我想让作为图形标签的边框适合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;
    }
}

【问题讨论】：

这正是您想要的。如果您想要图像周围的边框，为什么不直接在figure 上使用您在img 上所做的事情？
问题出在
我不希望它通过宽度
@Dave 也给
一个固定的宽度会使其不响应

标签： css figure

【解决方案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-width 分配给img。

【讨论】：

很遗憾，这不是我们想要的结果，有没有办法让图形最大宽度等于 img 宽度？

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：