☰

html/pdf/docx에 대한 pandoc을 사용하여 markdown에서 PNG 이미지 크기를 올바르게 조정

tag-icon • tag-icon pdf html png markdown pandoc
html/pdf/docx에 대한 pandoc을 사용하여 markdown에서 PNG 이미지 크기를 올바르게 조정

단일 문서를 html, pdf 및 docx로 변환하기 위해 pandoc과 함께 markdown을 사용하려고 합니다. 수학이 없는 텍스트와 몇 개의 이미지만 포함된 매우 간단한 문서입니다. 이미지는 PNG 형식입니다. 마크다운 소스에 이를 사용하여 이미지를 포함합니다.

<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 형식에서는 크기가 다르게 지정됩니다. 저해상도(72px/in)의 250x256px인 PNG는 PDF에서 페이지에 대략 올바른 크기로 표시되고 html에서는 적당한 크기로 표시되지만 크기(250x256px)는 동일하지만 크기가 고해상도(300px/in)는 PDF 출력 페이지에서 아주 작게 크기가 조정됩니다. 내가 지정한 크기의 PNG 이미지 세트를 유지하고 HTML/PDF/DOCX 형식 모두에서 해당 크기로 표시되도록 하고 싶습니다.

PDF/HTML을 사용하기 위해 자동 docx 지원을 포기하거나 이후에 많은 수동 서식을 처리할 의향이 있습니다.

PDF 또는 이미지의 PNG 크기를 조정하지 않고 올바른 이미지에 표시되도록 pandoc에 지시하려면 어떻게 해야 합니까? 감사해요.

답변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;"/>

비율이 정확할 것입니다.

참조:판독 읽어보기

HTML 및 EPUB의 경우 너비와 높이(srcset 및 크기 포함)를 제외한 모든 속성은 그대로 전달됩니다. 다른 작성자는 출력 형식에서 지원하지 않는 속성을 무시합니다.

이미지의 너비 및 높이 속성은 특별히 처리됩니다. 단위 없이 사용될 경우 단위는 픽셀로 간주됩니다. 그러나 px, cm, mm, in, 인치 및 % 등의 단위 식별자를 사용할 수 있습니다.숫자와 단위 사이에는 공백이 없어야 합니다.

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

마크다운 파일을 사용하면 아래와 같이 이미지 너비 높이를 설정할 수 있습니다. 이렇게 하면 각 이미지에 대해 서로 다른 크기를 설정할 수 있습니다.

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

관련 정보