Markdown을 시작했습니다. 나는 그것을 좋아하지만 나를 괴롭히는 한 가지가 있습니다 : Markdown을 사용하여 이미지의 크기를 어떻게 바꿀 수 있습니까?

설명서에는 이미지에 대한 다음 제안 만 제공됩니다.

![drawing](drawing.jpg)

가능하다면 사진도 중앙에 배치하고 싶습니다. GitHub이 수행하는 방식뿐만 아니라 일반적인 Markdown을 요청합니다.

특정 Markdown 구현 ( Mou 및 Marked 2 (macOS 만 포함 ) 포함) =WIDTHxHEIGHT을 사용하면 그래픽 파일의 URL 뒤에 추가 하여 이미지 크기를 조정할 수 있습니다. 앞에 공백을 잊지 마십시오 =.

![](./pic/pic1_50.png =100x20)

HEIGHT를 건너 뛸 수 있습니다

![](./pic/pic1s.png =250x)

Markdown에서 일부 HTML을 사용할 수 있습니다.

<img src="drawing.jpg" alt="drawing" width="200"/>

또는 style속성을 통해 ( GitHub에서 지원하지 않음 )

<img src="drawing.jpg" alt="drawing" style="width:200px;"/>

또는 Markdown 및 이미지 정렬 에 대한이 답변에서 설명한대로 사용자 정의 CSS 파일을 사용할 수 있습니다

![drawing](drawing.jpg)

다른 파일의 CSS :

img[alt=drawing] { width: 200px; }

여기에 허용 된 답변은 Ghost, Stackedit.io와 같은 날짜까지 사용했던 앱 또는 스택 오버플로 편집기에서 사용할 수있는 Markdown 편집기에서 작동하지 않습니다. StackEdit.io 이슈 트래커에서 해결 방법을 찾았습니다 .

해결책은 HTML 구문을 직접 사용하는 것이며 완벽하게 작동합니다.

<img src="http://....jpg" width="200" height="200" />

이게 도움이 되길 바란다.

그냥 사용하십시오 :

<img src="Assets/icon.png" width="200">

대신에:

![](Assets/icon.png)

PanDoc 용 MarkDown을 작성하는 경우 다음을 수행 할 수 있습니다.

![drawing](drawing.jpg){ width=50% }

이것은 추가 style="width: 50%;"하는 HTML에 <img>태그 또는 [width=0.5\textwidth]에 \includegraphics라텍스.

출처 : http://pandoc.org/MANUAL.html#extension-link_attributes

아마도 이것이 최근에 변경되었지만 Kramdown 문서 는 간단한 해결책을 보여줍니다.

문서에서

Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}.

And here is a referenced ![smile]

[smile]: smile.png
{: height="36px" width="36px"}

Jekyll 및 Kramdown과 함께 github에서 작동합니다.

하나는에 그릴 수있는 alt속성 거의 모든 마크 다운 구현에서 설정할 수 있습니다 / 렌더러를 CSS-선택기와 함께 속성 값을 기반으로. 장점은 다양한 사진 크기 (및 추가 속성)의 전체 세트를 쉽게 정의 할 수 있다는 것입니다.

가격 인하:

![minipic](mypic.jpg)

CSS :

img[alt="minipic"] { 
  max-width:  20px; 
  display: block;
}

교체 ![title](image-url.type)로<img src="https://image-url.type" width="200" height="200">

kramdown 을 사용하는 경우 다음을 수행 할 수 있습니다.

{:.foo}
![drawing](drawing.jpg)

그런 다음 이것을 사용자 정의 CSS에 추가하십시오 .

.foo {
  text-align: center;
  width: 100px;
}

Tiemes 답변을 기반으로 CSS 3 을 사용하는 경우 하위 문자열 선택기를 사용할 수 있습니다 .

이 선택기는 '-fullwidth'로 끝나는 alt 태그가있는 이미지와 일치합니다.

img[alt$="-fullwidth"]{
  width:  100%;
  display: block;
}

그런 다음 이미지를 설명 하기위한 목적 으로 alt 태그를 계속 사용할 수 있습니다 .

위의 마크 다운은 다음과 같습니다.

![Picture of the Beach -fullwidth](beach.jpg)

나는 이것을 Ghost markdown에서 사용했으며 잘 작동했습니다.

두 가지 답변을 결합하여 해결책을 찾았습니다
.

클릭하면 최대 해상도 이미지로 연결될 수있는 특정 크기의 축소판을 만듭니다.

[<img src="image.png" width="250"/>](image.png)

여기 예가 있습니다! Visual Code 및 Github에서 테스트했습니다.

나는 여기에 답을 찾고 있었다. 여기에 멋진 제안이 있습니다. 그리고 마크 다운이 지적한 금 정보는 HTMl을 완벽하게 지원합니다!

좋은 깨끗한 솔루션은 항상 순수한 HTML 구문을 사용하는 것입니다. 태그로.

그러나 여전히 마크 다운 구문을 고수하려고하여 태그를 감싸고 div 태그 안에 이미지에 원하는 속성을 추가했습니다. 그리고 그것은 작동합니다!

<div style="width:50%">![Chilling](https://www.w3schools.com/w3images/fjords.jpg)</div>

따라서 외부 이미지가 지원됩니다!

대답이 없기 때문에 이것을 거기에 넣을 것이라고 생각했습니다. :)

rmarkdown및 knitr솔루션 에 관심이있는 사람들을 위해 . .rmd파일을 사용하지 않고 이미지의 크기를 조정하는 몇 가지 방법 이 있습니다 html.

를 추가하여 이미지의 너비를 간단히 지정할 수 있습니다 {width=123px}. 대괄호 사이에 공백을 넣지 마십시오.

![image description]('your-image.png'){width=250px}

다른 옵션은 다음을 사용하는 것입니다 knitr::include_graphics.

```{r, fig.cap="image description", out.width = '50%'}
knitr::include_graphics('your-image.png')
```

Jekyll 에서 사용자 정의 크기의 img 태그를 사용하기 위해 간단한 태그 파서를 스크립팅했습니다 .

https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079

{% img /path/to/img.png 100x200 %}

_plugins폴더에 파일을 추가 할 수 있습니다 .

이 답변은 약간 구체적이지만 도움이 필요한 사람들에게 도움이 될 수 있습니다.

Imgur 서비스를 사용하여 많은 사진이 업로드되므로 여기 에 자세히 설명 된 API를 사용 하여 사진 크기를 변경할 수 있습니다 .

GitHub 이슈 코멘트에 사진을 업로드 할 때 Imgur를 통해 추가되므로 사진이 매우 큰 경우 많은 도움이됩니다.

기본적으로 http://i.imgur.com/12345.jpg 대신 중간 크기의 이미지에는 http://i.imgur.com/12345m.jpg 를 입력하십시오 .

kramdown과 함께 이것을 사용할 수 있습니다.

markdown
![drawing](drawing.jpg)   
{:.some-css-class style="width: 200px"}

또는

markdown
![drawing](drawing.jpg)   
{:.some-css-class width="200"}

이렇게하면 마지막 html 요소에 임의의 속성을 직접 추가 할 수 있습니다. 클래스를 추가하려면 바로 가기 .class.secondclass가 있습니다.

이것은 하나의 줄에 없지만 나를 위해 작동하지만 그것이 당신을 위해 작동하기를 바랍니다.

<div>
<img src="attachment:image.png" width="500" height="300"/>
</div>

R-Markdown의 경우 위의 솔루션 중 어느 것도 나에게 도움이되지 않았으므로 일반적인 LaTeX 구문으로 전환했는데 정상적으로 작동합니다.

\begin{figure}
 \includegraphics[width=300pt, height = 125 pt]{drawing.jpg}
\end{figure}

그런 다음 \begin{center}문장을 사용 하여 이미지를 가운데에 맞출 수 있습니다.

클래스 및 CSS 스타일 추가 방법이 있습니다.

![pic][logo]{.classname}

그런 다음 아래 링크와 CSS를 작성하십시오.

[logo]: (picurl)

<style type="text/css">
    .classname{
        width: 200px;
    }
</style>

여기에 참조

R markdown / bookdown 에서 작동하는 솔루션을 찾는 모든 이전 솔루션은 작동하지 않거나 약간의 적응이 필요합니다.

일

• 추가 { width=50% }또는{ width=50% height=50% }

  • ![foo](foo.png){ width=50% }

  • ![foo](foo.png){ width=50% height=50% }

  • 중요 : 너비와 높이 사이에 쉼표 { width=50%, height=30% } 가 없습니다 . 즉 작동하지 않습니다 !

• 추가 { height="36px" width="36px" }

  • ![foo](foo.png){ height="36px" width="36px" }
  • 참고 : {:height="36px" width="36px"} @sayth에서와 같이 콜론을 사용하면 R 마크 다운과 함께 작동하지 않는 것 같습니다

작동하지 않는:

• 추가 =WIDTHxHEIGHT
  • 그래픽 파일의 URL 다음에 이미지 크기를 조정합니다 (@prosseek에서와 같이).
  • =WIDTHxHEIGHT ![foo](foo.png =100x20)뿐만 =WIDTH아니라 ![foo](foo.png =250x)작동 하지 않습니다

Github 참조 스타일 이미지를 사용하는 경우 :

Here is an image of tree: 
![alt text][tree]{height=400px width=500px}


[//]: # (Image References)
[tree]: ./images/tree.png "This is a tree"

소스 URL에 상대 크기를 추가하면 대부분의 Markdown 렌더러에서 렌더링됩니다.

우리 는 패턴이 사용자가 기본 HTML에 의존하지 않고 기존 워크 플로의 기대를 따르는 패턴이라고 생각하기 때문에 Corilla 에서 이것을 구현했습니다 . 선호하는 도구가 유사한 패턴을 따르지 않으면 기능 요청을 제기 할 가치가 있습니다.

구문의 예 :

![a-kitten.jpg](//corilla.com/a-kitten-2xU3C2.jpg =200x200)

새끼 고양이의 예 :

Jupyter Notebook에서 마크 다운 이미지 첨부 파일 크기 조정

내가 사용하고 있습니다 jupyter_core-4.4.0및 jupyter 노트북.

다음과 같이 마크 다운에 이미지를 삽입하여 이미지를 첨부하는 경우 :

![Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png](attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png)

이 attachment링크 는 작동 하지 않습니다 :

<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>

이 작업을 수행하십시오 . 이것은 작동 합니다.

div 괄호를 추가하십시오.

<div>
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
</div>

도움이 되었기를 바랍니다!

나중에 참조 할 수 있도록 :

Joplin에 대한 Markdown 구현을 통해 다음과 같은 방식으로 가져온 이미지의 크기를 제어 할 수 있습니다.

<img src=":/7653a812439451eb1803236687a70ca" width="450"/>

이 기능은 요청 된 이곳 과 같은 약속 에 의해 로랑 이 구현되었습니다.

Joplin 특정 답변을 파악하는 데 시간이 걸렸습니다.

Flask를 사용할 때 (평평한 페이지와 함께 사용하고 있습니다) ... markdown에 대한 호출 내에서 'attr_list'를 명시 적으로 사용하도록 설정하면 트릭이 발생한다는 것을 알았습니다. 그러면 속성을 사용할 수 있습니다 (예를 들어 CSS에 액세스하는 데 매우 유용합니다-class = "my class"...).

FLATPAGES_HTML_RENDERER = prerender_jinja

그리고 기능 :

def prerender_jinja(text):
    prerendered_body = render_template_string(Markup(text))
    pygmented_body   = markdown.markdown(prerendered_body, extensions=['codehilite', 'fenced_code', 'tables', 'attr_list'])
    return pygmented_body

그리고 마크 다운에서 :

![image](https://octodex.github.com/images/yaktocat.png "This is a tooltip"){: width=200px}

들어 하게 IntelliJ IDEA의 사용자를 참조하십시오 마크 다운 네비게이터 플러그인.

미리보기는 이미지, 배지, HTML 등을 렌더링합니다.

초기 마크 다운 변경이 옵션이 아닌 경우이 해킹이 작동 할 수 있습니다.

newHtml = oldHtml.replace(/<img/g, '<img height="100"');

전자 메일로 이미지를 보내기 전에 이미지 크기를 조정할 수있었습니다 (Outlook은 이미지 CSS 스타일을 무시하므로)

Tieme의 답변은 대부분의 경우에 가장 좋습니다.

제 경우에는 pandoc을 사용하여 markdown을 라텍스로 변환하고 있습니다. HTML 태그는 여기서 작동하지 않습니다.

내 솔루션은 다시 구현하는 것입니다 \includegraphics

\let\maxincludegraphics\includegraphics
\renewcommand{\includegraphics}[1]{\maxincludegraphics[max width=\textwidth]{#1}}

HTML로 변환 한 후 CSS를 사용하는 것과 유사합니다.