Html 如何在文本或段落中包含图像

我不确定正确的术语，因为我对xsl:fo相当陌生。我正在创建一些样式表来将html页面转换为pdf，除了“在段落中”的图像外，所有的工作都很正常。我有几个包含图标的段落，我想把它们转换成xsl:fo

html如下所示：

<p>This is a sentence with some icons, like <img src="icon_up"/>, <img src="icon_down"/>, and <img src="icon_right"/></p>

This is a sentence with some icons, like 
[u]
, 
[d]
, and 
[r]

我正在使用这些模板转换为pdf（使用Altova XML/FOP）

---

那么，我如何在一行中获得它，而不是向下层叠？

没关系，我同时找到了解决方案，如下所示：

<xsl:template match="img[parent::p]">
<fo:inline> <fo:external-graphic src="{@src}" content-width="80%" scaling="uniform"/></fo:inline>
</xsl:template>

---

格式化对象

fo:external graphic

有两对维度：

• 宽度

  和

  高度

  定义图像的分配区域（非正式地说，它们定义了一个“窗口”或“孔”，通过该窗口可以看到图像）
  • 百分比与线条的宽度和高度有关
  • 如果未设置为固定值或百分比，则默认为其他两个参数的对应值

• 内容宽度

  和

  内容高度

  定义图像的大小
  • 百分比与图像的固有大小（像素宽度/分辨率、像素高度/分辨率）相关

如果

width

和

height

定义了一个比

content width

和

content height

定义的矩形小的矩形，则只会看到图像的一部分；在相反的情况下，分配的区域将仅部分被图像占用（您可以在中找到完整的正式定义）

您的原始模板具有：

<fo:external-graphic src="{@src}" width="100%" .../>

因此，为每个图像分配的区域的宽度等于行宽度的100%，将以下内容推到下一行中

为了使较小的图像与周围的文本在同一行中，您可以使用

内容宽度

和

内容高度

，将它们设置为固定值（例如

“1cm”

）或相对于其固有大小的百分比（如您在自我回答中所做的），并将

宽度

和

高度

保留为默认值

<xsl:template match="img[parent::p]">
<fo:inline> <fo:external-graphic src="{@src}" content-width="80%" scaling="uniform"/></fo:inline>
</xsl:template>

<fo:external-graphic src="{@src}" width="100%" .../>