这就是说明的问题:
我想使边框,这是数字标签,以适应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;
}
}
发布于 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
。
发布于 2019-04-26 23:56:10
在图中使用display:table
,在figcaption
中使用display:table-caption
发布于 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>
https://stackoverflow.com/questions/52822338
复制相似问题