将<figcaption>缩小到同级<img>并使其保持响应
将<figcaption>缩小到同级<img>并使其保持响应
提问于 2018-10-16 01:59:56
这就是说明的问题：
我想使边框，这是数字标签，以适应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;
}
}回答 3
Stack Overflow用户
发布于 2018-10-16 03:23:01
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所需的宽度即可。如果您只希望img成功一半，就为它分配一个max-width。
Stack Overflow用户
发布于 2019-04-26 23:56:10
在图中使用display:table，在figcaption中使用display:table-caption
Stack Overflow用户
发布于 2019-04-27 00:29:46
只需根据您的方便来缩放您的图像，父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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52822338
复制相关文章
相似问题
腾讯云开发者
