figcaption 在图中不算作 space 吗？

Question

TL;DR：是的，我“遗漏了一些明显的东西”。抱歉。

将图像放在图形中效果很好，所有边框都很好地嵌套：

但是当我添加一个图形标题时，图像的大小保持不变并且溢出图形：

这就像 "height: 100%" 因为图像占了图形的 100%，忽略图形说明。

我在 Firefox 和 Chrome 中得到相同的行为。

忽略任何横向问题；我去掉了那个代码。

这真的是它应该的行为方式吗，还是我遗漏了一些明显的东西？

<!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>

Answer 1

“这就像 "height: 100%" 因为图像占据了 100% 的图形，忽略了 figcaption。”

是的，没错。

您的 figcaption 占用 space 除非您使用 position:absolute. 将其从流中删除您已经定义了 figure 的高度，并告诉您的 img 取这个高度的 100%，就是这样。它根本没有“忽略”figcaption。如果它是父级，你告诉它的高度等于 100%。你的 img 如何占据 figure 的 100% 高度并且仍然包含在你的 figure 中，如果你在你的 figure 中添加另一个元素，它也将占据身高？

根据要求忽略您的宽度问题，假设您需要给您的 figure 定义高度，请按如下方式定义您的高度：

* { 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%;}

Answer 2

这是因为你的 CSS 个单位。 em 等于当前 font-size。这是一个可扩展的单元，但不是你想要的。您的 parent 应该可以根据其中的内容 随心所欲地扩展 以提高响应能力。看这里

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

你的身材标签有宽度，不管是什么，你在这里做错的是你把标签封起来了。您允许 45% 宽度但限制高度。然后你做错了。

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

正在使图像缩放到全高。这就是为什么由于 parent div 的 bounded-ness 和这张图片的 height:100% 你会看到图片正在消失或溢出图形的原因。您应该允许 parent 独立缩放，并为改变外观的 child 元素定义宽度。

综上所述，综合考虑，你明白了

<!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>

figcaption 在图中不算作 space 吗？

Does figcaption not count as space inside a figure?

html

css

figure