CODEWITHSUNDEEP
htmlcssfigure
Ray Butterworth
Ray Butterworth

Reputation: 618

Does figcaption not count as space inside a figure?

TL;DR: Yes, I was "missing something obvious". Sorry about that.

Putting an image inside a figure works fine, with all the borders nicely nesting:

No figcaption

But when I add a figcaption, the size of the image stays the same and overflows the figure:

With figcaption

It's like the "height: 100%" for the image takes 100% of the figure, ignoring the figcaption.

I get the same behaviour in both Firefox and Chrome.

Ignore any horizontal problems; I stripped out that code.

Is this really how it's supposed to behave, or am I missing something obvious?

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
        <title>Stack Exchange Logo</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
                * { box-sizing: border-box; border-style: solid; padding: .1em; }
                figure { height: 30em; width: 45%; }
                figure>img { width: auto; height: 100%; border-color: red; }
        </style>
</head>

<body>
<figure>
        <figcaption>Stack Exchange Logo</figcaption>
        <img alt="SE logo" src="https://pbs.twimg.com/profile_images/1213884858/apple-touch-icon_400x400.png" />
</figure>
</body>
</html>

Upvotes: 0

Views: 700

Answers (2)

weegee
weegee

Reputation: 3409

It's because of your CSS units. em is equal to the current font-size. It's a scaleable unit but not what you want. Your parent should be allowed to scale as much as it wants according to the content inside it for responsiveness. See here 

figure { height: 30em; width: 45%; }

Your figure tag has a width, be it any, what you are doing wrong here is you are kind of sealing the tag. You are allowing it for a 45% width but limiting the height. And then you are doing this wrong.

figure>img { width: auto; height: 100%; border-color: red; }

Making the image scale to the full height. That's why because of the bounded-ness of your parent div and this image's height:100% you are seeing that the image is going out or it overflows the figure. You should allow the parent to scale independently and define a width to the child elements that alter the appearance.

All that being said, taking everything in considerations, you get this 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
        <title>Stack Exchange Logo</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
                 * { box-sizing: border-box; border-style: solid; padding: .1em; }
                figure { height: auto; width: 45%; }
                figure>img { width: 100%; height: 100%; border-color: red; }
        </style>
</head>

<body>
<figure>
        <figcaption>Stack Exchange Logo</figcaption>
        <img alt="SE logo" src="https://pbs.twimg.com/profile_images/1213884858/apple-touch-icon_400x400.png" />
</figure>
</body>
</html>

Upvotes: 3

Claire
Claire

Reputation: 3184

“It's like the "height: 100%" for the image takes 100% of the figure, ignoring the figcaption.”

Yes, exactly.

Your figcaption takes up space unless you remove it from the flow using position:absolute. You have defined the height of your figure, and told your img to take 100% of this height, so it is. It’s not “ignoring” the figcaption at all. You told it to have a height equal to 100% if it’s parent. How can your img take up 100% of the height of the figure and still be contained within if you’re adding another element into your figure that will also take up a percentage of the height?

Ignoring your width issues as requested, and assuming you need to give your figure a defined height, define your heights as follows:

* { box-sizing: border-box; border-style: solid; padding: .1em; }
figure { height: 30em; width: 45%; }
figure>img { width: auto; height: 95%; border-color: red; }
figcaption {height:5%;}

Upvotes: 1

Related Questions