Skip to content Skip to sidebar Skip to footer
Home / Css / Figure / Html / Image

How To Format Figcaption To Not Stretch A Min-width Figure

Post a Comment
I use the following markup to present an image and its caption. HTML:
Copy 
<div class="fig-container">
    <figure class="captioned-figure">
        <img class="full-width" src="http://25.media.tumblr.com/tumblr_lhp4ibjZlc1qgnva2o1_500.jpg"/>
        <figcaption>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque laboriosam earum obcaecati incidunt consequatur non molestiae voluptas ratione hic commodi, iure nobis asperiores. Similique, cupiditate, rerum! Aliquid, repellendus itaque amet!
        </figcaption>
    
    </figure>
</div>

What do you think ?


Solution 2:

I found a solution using inline-tables:

HTML:

<div class="fig-container">
    <figure class="captioned-figure">
        <img class="full-width" src="..."/>
        <figcaption class="img-subtitle">
            TEXT TEXT TEXT
        </figcaption>
    </figure>
</div>

CSS:

.fig-container{
    text-align: center;
}

.captioned-figure{
    display: inline-table;
    min-width: 50%;
}

.full-width{
    display: block;
    width: 100%;
    height: auto;
}

.img-subtitle{
    display: table-caption;
    caption-side: bottom;
}

You may like these posts

Post a Comment for "How To Format Figcaption To Not Stretch A Min-width Figure"