CODEWITHSUNDEEP
htmlcss
detly
detly

Reputation: 30332

Can a figcaption be restricted to the width of a responsively sized image?

Say I have the following HTML:

<figure>
<img alt="Sun" src="sun.gif" width="256" height="256" />
<figcaption>The Sun - a sinister and destructive force. Image from
the SOHO research facility.</figcaption>
</figure>

If I want the text to wrap to the width of the image, I need this CSS:

figure {
    display: table;
    width: 1px;
}

If I want the image to be "responsive" — that is, be no bigger than the viewport — I need this CSS too:

img {
    max-width: 100%;
}

But combining these two results in a terrible mess! Now that the img's parent has an explicit width set, the max-width causes the whole figure to be really, really tiny (although not quite 1px).

So is it possible to use CSS (2 or 3) to achieve both an image caption wrapped to no wider than the image, and an image no wider than the viewport?

Upvotes: 22

Views: 15557

Answers (8)

Art From NY
Art From NY

Reputation: 1

This worked for me. Keeps the image centered, which I want, and seems fully responsive. Apologies in advance for not being able to figure out how to get the code font right. As I said worked for me; no guarantee of course that it will work for you.

   <figure style="float:none;margin:auto">
                         <img style="max-height: 400px; max-width: 350px;margin:auto;" src="images/pp-improved-studio-shot-300pxw.jpg">  
                        <figcaption style="max-width:400px;">                        
                            The world standard for reliable solvent resistant touchup pens for all industries.                           
                        </figcaption>
                    </figure>

Upvotes: 0

scottrod
scottrod

Reputation: 587

Because we have flexbox today, this might work for too. The following will auto adjust based on image width, so do not set hardcoded values within the stylesheet. (Yuk!) Be sure to follow today's best practices and make sure images have both, height and width attributes.

figure {
float: left;
margin-right: 1em;
margin-bottom: 1em;
display: inline-flex;
flex-wrap: wrap;
}

figcaption {
width: min-content;
flex: 1; 
}

figure > img {
flex: 1 0 100%;
}

Upvotes: 1

CherryFlavourPez
CherryFlavourPez

Reputation: 7497

I came across the same issue and was able to come up with a fairly neat solution, inspired by this.

HTML:

<figure>
   <img src="http://www.placehold.it/300x150" alt="" />
   <figcaption>Make me as long as you like</figcaption>
</figure>​

CSS:

figure {
   display: table;
   padding: 5px;
   background-color: #fff;
   font-size: .875em;
   
}

figure img {
   display: block;
   max-width: 100%;
}

figcaption {
   display: table-caption;
   caption-side: bottom;
   background: #fff;
   padding: 0 5px 5px;
}​

This ensures the figcaption does not exceed the width of the figure, whilst allowing you to keep max-width on the image. Works in all good browsers and IE8+.

The figure's width will be whatever the native width of the image is, unless that width is restricted in some other way.

Upvotes: 41

Vacilando
Vacilando

Reputation: 3047

If using Bootstrap you can easily fix the problem by setting breakpoint widths on , e.g. class="col-12 col-md-6 col-lg-5 col-xl-4". Both the image and its caption will nicely fit in the given sizes, and if the caption is too long for its image width it will wrap appropriately.

Upvotes: 0

jiggunjer
jiggunjer

Reputation: 2116

If I want the text to wrap to the width of the image, I need this CSS: [...]

Instead of hardcoding a size use min-content.

figure {
    display: block;
    border: 1px dotted blue;
    margin: 3px;
}
figure>figure {
    display: inline-block;
    border: 2px solid red;
    width: min-content;
}
<figure>
	<figure>
	 <img src="https://dummyimage.com/200x100" alt="An image of a bunny rabbit."/>
		<figcaption>Lorem ipsum  </figcaption>
	</figure>
	<figure>
	 <img src="https://dummyimage.com/200x100"  alt="An image of a bunny rabbit." />
		<figcaption>Lorem ipsum dolor sit amet, consectetur</figcaption>
	</figure>
	<figure>
	 <img src="https://dummyimage.com/200x100" alt="An image of a bunny rabbit."/>
		<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, molestiae, similique ullam labore soluta autem </figcaption>
	</figure>
	<figure>
		 <img src="https://dummyimage.com/200x100" alt="An image of a bunny rabbit."/>
		<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, molestiae, similique ullam labore soluta autem placeat officia </figcaption>
	</figure>
</figure>

Upvotes: 0

Danield
Danield

Reputation: 125463

So is it possible to use CSS (2 or 3) to achieve both an image caption wrapped to no wider than the image, and an image no wider than the viewport?

Yes. Just use viewport units on the img - max-width: 100vw; instead of % - max-width: 100%;

DEMO

Just for completeness:

There are 2 other techniques to get the text to wrap to the width of the image:

1) Set display: table-caption; on the figcaption

DEMO

2) Set width: min-content on the figure

DEMO

Upvotes: 4

Talon
Talon

Reputation: 3593

Super old question, but I am currently in the same situation and I think I have found a very easy solution. Admittedly I have only tested this in the latest versions which at this time are: IE 11 FF 37 Chrome 40

<figure>
   <img>
   <figcaption>
</figure>

figure {
   display: table;
   width: 50px; /* Set this to the minimum caption width */
}

And that's it. I don't know if it's a quirk that will be fixed in future but it works very well right now. If the image is larger than 50px, the figure and figcaption will automatically resize. If it is less than 50px, the caption stay 50px;

Upvotes: 0

maiorano84
maiorano84

Reputation: 11951

Is image scaling important? If not, then consider using background images.

PURE CSS:

<figure>
<div class="caption">
<figcaption>The Sun - a sinister and destructive force. Image from
the SOHO research facility.</figcaption>
</div>
</figure>
<style type="text/css">
figure{display:table;width:1px;position:relative;}
figure div.caption{
background:url(sun.gif) no-repeat 0 0 scroll;
width:256px;
height:256px;
position:absolute;
}
</style>

CSS WITH INLINE STYLING:

<figure>
<div class="caption" style="background:url(sun.gif) no-repeat 0 0 scroll;width:256px;height:256px;">
<figcaption>The Sun - a sinister and destructive force. Image from
the SOHO research facility.</figcaption>
</div>
</figure>
<style type="text/css">
figure{display:table;width:1px;position:relative;}
figure div.caption{position:absolute;}
</style>

Upvotes: 0

Related Questions