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

November 24, 2023 Post a Comment

I use the following markup to present an image and its caption. HTML:

Copy

<divclass="fig-container"><figureclass="captioned-figure"><imgclass="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:

<divclass="fig-container"><figureclass="captioned-figure"><imgclass="full-width"src="..."/><figcaptionclass="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;
}

Html5 Guru

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

Solution 2:

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