Question

TL; DR：是的，我是“ 缺少明显的东西”。抱歉。

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

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

就像图像的“高度：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

这是因为您的CSS单位。 em等于当前字体大小。这是一个可扩展的单位，但不是您想要的。应该允许您的父母根据自己的内容根据其内容进行缩放，以提高响应能力。看到这里

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

您的人物标签有一个宽度，无论如何，您在这里做错的是您在密封标签。您允许使用45%宽度，但限制了高度。然后您做错了。

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

使图像比例达到最大高度。这就是为什么由于您的父div的有界性以及该图像的height:100%而使您看到该图像消失了或它使图形溢出的原因。您应该允许父级独立缩放，并为更改外观的子级元素定义宽度。

话虽如此，考虑到所有因素，您就会明白这一点

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

Answer 2

“ 这就像图像的“高度：100％”占据了图形的100％，而忽略了figcaption。”

是的。

您的figcaption会占用空间，除非您使用position:absolute.将其从流程中删除，否则您已经定义了figure的高度，并告诉img占用100％这样的高度。它根本不是在“忽略” figcaption。您告诉它的高度（如果是父母的话）等于100％。如果您要在img中添加另一个元素，而您的figure占figure高度的100％，并且仍然包含在其中，则该元素仍将包含在其中高度？

根据要求忽略宽度问题，并假设需要为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%;}

figcaption不能算作图形中的空间吗？

2 个答案: