首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >将<figcaption>缩小到同级<img>并使其保持响应

将<figcaption>缩小到同级<img>并使其保持响应
EN

Stack Overflow用户
提问于 2018-10-16 01:59:56
回答 3查看 185关注 0票数 0

这就是说明的问题:

我想使边框,这是数字标签,以适应img。

这是html结构:

代码语言:javascript
复制
<div class="container">
    <figure>
        <img src="" alt="">
        <figcaption></figcaption>
    </figure>
</div>

这是css:

代码语言:javascript
复制
figure {
    border: 1px solid $color-light-gray;
    padding: 5px;

    img {
        max-width: 100%;
        height: 100%
    }

    figcaption {
        text-align: center;
    }
}
EN

回答 3

Stack Overflow用户

发布于 2018-10-16 03:23:01

代码语言:javascript
复制
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

票数 0
EN

Stack Overflow用户

发布于 2019-04-26 23:56:10

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

票数 0
EN

Stack Overflow用户

发布于 2019-04-27 00:29:46

只需根据您的方便来缩放您的图像,父div会自动缩放,例如

代码语言:javascript
复制
figure {
  border: 1px solid #ccc;
  padding: 5px;

}
img {
  width: 100%;
  height: 100%
}

figcaption {
  text-align: center;
}
代码语言:javascript
复制
<div class="container">
    <figure>
        <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="">
        <figcaption>Caption Caption Caption Caption Caption</figcaption>
    </figure>
</div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52822338

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档