I'm struggling with the CSS for an image inside a figure. Here is the HTML:
#content figure {
display: inline-block;
border: 1px solid #333333;
height: 200px;
margin: 10px;
}
#content img {
height: 180px;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center center;
border: 1px solid red;
margin: 0px;
margin-bottom: -5px;
}
#content figcaption {
border: 1px solid blue;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
text-shadow: none;
color: black;
text-align: center;
height: 20px;
}<div id="content">
<figure>
<img style="background-image: url('http://placehold.it/300x300');"></img>
<figcaption>image caption that is too long to fit</figcaption>
</figure>
<!--... /*Here it can be multiple figure after each other*/-->
</div>I am looking for the figure to maintain a fixed height of 200px, while the figcaption adjusts its height automatically based on the text content. The image should then fill the remaining height, scaling the width proportionally. The figure's width should match that of the image within. The current code is not achieving all these requirements and I'm unsure of how to modify it accordingly.