☰

使用 pandoc 为 html/pdf/docx 正确调整 markdown 中的 PNG 图像大小

tag-icon • tag-icon pdf html png markdown pandoc
使用 pandoc 为 html/pdf/docx 正确调整 markdown 中的 PNG 图像大小

我正在尝试使用 markdown 和 pandoc 将单个文档转换为 html、pdf 和 docx。这是一个非常简单的文档，仅包含无数学文本和一些图像。图像为 PNG 格式。我在 markdown 源中包含一张使用此格式的图像：

<div style="float:center" markdown="1">

![my caption](./figures/myimage.png)

</div>

并将其编译为：

# html
pandoc myarticle.md -c mystyle.css -o myarticle.html
# pdf
pandoc myarticle.md -V geometry:margin=1in -o myarticle.pdf
# docx
pandoc myarticle.md -o myarticle.docx

我注意到一些 PNG 图像相同尺寸在 HTML 和 PDF 格式中大小不同。250x256 像素、低分辨率（72 像素/英寸）的 PNG 将在 PDF 中以大致正确的大小显示在页面上，并在 html 中以合理的大小显示，但尺寸相同（250x256 像素）但分辨率较高（300 像素/英寸）的 PNG 在 PDF 输出中会调整为页面上很小。我希望保留一组我指定大小的 PNG 图像，并让它们以该大小显示在 HTML/PDF/DOCX 格式中。

我愿意放弃自动 docx 支持（或之后处理大量手动格式化）只是为了获得 PDF/HTML。

我如何告诉 pandoc 不要调整 PDF 或图像的 PNG 大小，并让它们出现在正确的图像中？谢谢。

答案1

尺寸将转换为像素，以便以类似 HTML 的格式输出。使用该--dpi选项指定每英寸的像素数。默认值为 96dpi。

找到图片中最常见的元素并使用它。仅修改例外。

例如：dpi、宽度、高度。

如果你给它 dpi 信息：

按照说明添加 --dpi 选项来覆盖默认值。

如果您的大多数图片具有共同的高度或宽度，那么应该很容易纠正。

例如，您将该行更改为：

![my caption](./figures/myimage.png){ width=250px }

或者

![my caption](./figures/myimage.png){ height=256px }

或者直接用 HTML 标记来执行此操作：

<img src="./figures/myimage.png" alt="my caption" style="width: 250px;"/>

或者

<img src="./figures/myimage.png" alt="my caption" style="height: 256px;"/>

并且比例是正确的。

参考：Pandoc 自述文件

对于 HTML 和 EPUB，除宽度和高度（但包括 srcset 和 size）之外的所有属性均按原样传递。其他写入器会忽略其输出格式不支持的属性。

图像的宽度和高度属性被特殊处理。当使用时不带单位，单位被假定为像素。但是，可以使用以下任何单位标识符：px、cm、mm、in、inch 和 %。数字和单位之间不能有空格。

尺寸将转换为英寸，以便以 LaTeX 等基于页面的格式输出。尺寸将转换为像素，以便以 HTML 等格式输出。使用该--dpi选项指定每英寸的像素数。默认值为 96dpi。

% 单位通常与某个可用空间相关。例如，上述示例将渲染为：

  1. <img href="file.jpg" style="width: 50%;" />（HTML），
  2. \includegraphics[width=0.5\textwidth]{file.jpg}（LaTeX），或
  3. \externalfigure[file.jpg][width=0.5\textwidth]（语境）。

一些输出格式具有类（ConTeXt）或唯一标识符（LaTeX）的概念\caption，或者两者兼有（HTML）。

当未指定宽度或高度属性时，将返回查看图像分辨率和图像文件中嵌入的 dpi 元数据。

注意，数字和单位之间不能有空格，字段和其属性之间也不能有空格，否则这两种方式都不起作用：

![image](/path/to/image){ width = 100% }
![image](/path/to/image){ width=100 px }

如果有空格，标签将被忽略并将作为常规文本发布在您的文档中。

答案2

将样式应用于图像，请尝试此
CSS 样式

img[src*="#thumbnail"] {
   width:150px;
   height:100px;
}
img[title="thumbnail"] {
   width:200px;
}
img[alt$="-thumbnail"]{
    width:300px;
}

md 编码风格

![img](link#thumbnail) <!-- src = link#thumbnail -->
![img](link "thumbnail") <!-- title = thumbnail -->
![img -thumbnail](link) <!-- alt = img -thumbnail -->

答案3

使用 markdown 文件，您可以按如下方式设置图像宽度和高度。这可让您为每个图像设置不同的尺寸。

![Title](YOUR_IMAGE_PATH){width=150px height=100px}

相关内容