☰

使用 pandoc 在 markdown 中正確調整 html/pdf/docx 中 PNG 圖片的大小

tag-icon • tag-icon pdf html png markdown pandoc
使用 pandoc 在 markdown 中正確調整 html/pdf/docx 中 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 格式的大小不同。低解析度（72 像素/英吋）的 250x256 像素的 PNG 將在 PDF 中顯示為頁面上大致正確的尺寸，並以合理的尺寸顯示在 html 中，但具有相同尺寸（250x256 像素）但高解析度（ 300 像素/英吋）在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 和尺寸）之外的所有屬性均按原樣傳遞。其他編寫器忽略其輸出格式不支援的屬性。

影像的寬度和高度屬性經過特殊處理。當不帶單位使用時，假定單位為像素。但是，可以使用以下任何單位識別碼：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}（乳膠），或
  3. \externalfigure[file.jpg][width=0.5\textwidth](情境).

\caption某些輸出格式具有類別 (ConTeXt) 或唯一識別碼 (LaTeX ) 或兩者 (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}

相關內容