I created an HTML snippet that has the following structure:
<div class="large-4 columns">
<div class="promo-box">
<a href="#">
<img src="/our-projects-sfk.png">
<div class="caption">
<h5><Our Projects</h5>
<p>For 20 years, we have been delighting families with a three-day dream trip to Kristiansand Zoo for children battling cancer every summer.</p>
</div>
</a>
</div>
</div>
However, I am facing a challenge in setting the width of the div and caption based on the image width because I do not know the image width beforehand. I tried various methods such as setting display: inline-block, display: table, using figure and figcaption tags, but none of them provided the desired outcome. Can you help me figure out how to make the caption width match the image width?
Here is the CSS code I attempted to use:
.promo-box {
display: table;
}
.promo-box img {
width: 100%;
height: auto;
vertical-align: top;
margin-bottom: 3px;
}
.promo-box .caption {
display: table-caption;
caption-side: bottom;
box-sizing: border-box;
padding: 10px;
margin: 0;
}
Unfortunately, the result was not as expected: