个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
TL;DR:是的，我“遗漏了一些明显的东西”。对此感到抱歉。
将图像放在图形中效果很好，所有边框都很好地嵌套:
但是当我添加一个图形标题时，图像的大小保持不变并溢出图形:
这就像图像的“高度: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>最佳答案
这是因为您的 CSS 单位。 em 等于当前字体大小。这是一个可扩展的单元，但不是你想要的。应该允许您的 parent 根据其中的内容尽可能多地缩放以提高响应能力。看这里
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>关于html - figcaption 不算作图形内的空间吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56622035/
24
4
0
我一直在为此而苦苦挣扎。我想插入一个图像，并将其“靠近”讨论该图像的文本，但是该页面上的文本将围绕图像环绕/流动。 我已将图像转换为eps格式。最初，我尝试使用图形环境(\begin {figure}
我在用户界面中创建了管理控制台，管理员可以在其中执行所有操作，例如创建、删除用户、向用户分配应用程序以及从用户界面删除用户的应用程序访问权限 我厌倦了使用 Microsoft 图形 API 和 Azu
我在用户界面中创建了管理控制台，管理员可以在其中执行所有操作，例如创建、删除用户、向用户分配应用程序以及从用户界面删除用户的应用程序访问权限 我厌倦了使用 Microsoft 图形 API 和 Azu
我想为计算机图形学类(class)做一个有趣的项目。我知道那里有很多文献(即 SIGGRAPH session 论文)。我对计算机图形学(即图像处理、3D 建模、渲染、动画)兴趣广泛。但是，我只学了
我试图在 MaterializeCSS 网站上创建一些类似于这个的图形，但我不知道它来自哪里，我查看了整个 MaterializeCSS 网站，它不是框架的一部分，我找不到在代码中他们使用的是什么 我
我有一个包含 1 到 6 之间的各种数字的 TextView ，每个数字在每一行上代表一次，例如 123456 213456 214356 ...... 我希望能够绘制一条蓝线来跟随单个数值在列表中向
我目前在 Windows 7 上使用 Netbeans 和 Cygwin，我希望用 C 语言编写一个简单的 2D 游戏。 我设法找到的大多数教程都使用 Turbo C 提供的 graphics.h，C
亲爱的，我正在尝试将 kaggle 教程代码应用于 Iris 数据集。 不幸的是，当我执行图表的代码时，我只能看到这个输出而看不到任何图表: matplotlib.axes._subplots.Axe
我需要加快我正在处理的一些粒子系统的视觉效果。令人眼前一亮的是添加混合、积累以及粒子上的轨迹和发光。目前我正在手动渲染到浮点图像缓冲区，在最后一分钟转换为无符号字符，然后上传到 OpenGL 纹理。为
在研究跨网络的最短路径算法时，我想生成网络图片。我想代表节点(圆圈)、链接(线)、遍历链接的成本(链接线中间的数字)和链接的容量(链接线上它代表的节点旁边的数字)在这张图中。是否有任何库/软件可以帮助
尽管我已将应用程序从库添加到 Azure AD，但我无法看到何时尝试提取数据。但我可以看到添加的自定义应用程序。就像我添加了 7 个应用程序一样； 2 个来自图库(Google 文档、一个驱动器)和
因此，我正在构建一个系统，该系统具有“人员”，“银行帐户”和“银行帐户交易”。 我需要能够回答以下问题: “将所有与1/2/3度有联系的人归还给特定的人”， “返回年龄在40岁以上的所有人” “从德国
我在 JFrame 构造函数中有以下简单代码 super(name); setBounds(0,0,1100,750); setLayout(null); setVis
(这是java)我有一个椭圆形，代表一个单位。我希望椭圆形的颜色代表单位的健康状况。因此，一个完全健康的单位将是全绿色的。随着单位生命值的降低，椭圆形开始从底部填充红色。因此，在 50% 生命值下，椭
我目前正在开发一个学校项目。我们必须制作一个Applet，我选择了JApplet。由于某种原因，我用来显示特定字符串的面板将不会显示。这里可能有什么问题？请指出我正确的方向。另外，我看了一些教程，
我正在尝试创建一个 Simon game 。我正在编写游戏程序，但遇到了问题。我希望程序从队列中读取游戏中之前存在的所有值，并以正确的顺序将它们的颜色变为闪烁(我选择将它们变为灰色，然后在第二秒后恢复
我正在尝试创建一个框架，该框架在同一框架的顶部有一个图形面板(通过布局)，在其下方有一个按钮/标签面板。到目前为止，我似乎已经能够将它们放在同一个框架上，但与按钮/标签面板相比，图形面板非常小....
我用 Java 编写了一个解决数独问题的代码，并使用 Java Applet 来设计它。现在，我尝试使用 Java Swing 使其看起来更好，并添加一些功能，例如“保存”数独板等。不幸的是，我对 J
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
我现在尝试了 8 个多小时来解决这个问题，但无法弄清楚，请帮助找出我的代码有什么问题。 int main() { int gd = DETECT, gm; float ANGLE =
我是一名优秀的程序员,十分优秀！