Markdownを始めたばかりです。私はそれを愛していますが、私を悩ませていることが1つあります。Markdownを使用して画像のサイズを変更するにはどうすればよいですか？

ドキュメントでは、画像について次の提案のみを提供しています。

![drawing](drawing.jpg)

可能であれば、画像も中央に配置してください。GitHubがそれを行う方法だけでなく、一般的なMarkdownを求めています。

特定のMarkdown実装（MouおよびMarked 2（macOSのみ）を含む）では=WIDTHxHEIGHT、画像のサイズを変更するためにグラフィックファイルのURLの後に追加できます。の前のスペースを忘れないでください=。

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

高さをスキップできます

![](./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;"/>

または、マークダウンと画像の配置に関するこの回答で説明されているカスタムCSSファイルを使用することもできます

![drawing](drawing.jpg)

別のファイルのCSS：

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

ここで受け入れられた回答は、Ghost、Stackedit.io、またはStack Overflowエディターなど、これまで使用してきたアプリで使用可能な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]に\includegraphicsLaTeXの中で。

出典：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で動作します。

CSSセレクターと一緒にほとんどすべてのMarkdown実装/レンダリングで設定できるalt属性を利用するかもしれません属性値に基づいて。利点は、さまざまな画像サイズ（およびその他の属性）のセット全体を簡単に定義できることです。

マークダウン：

![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タグを使用できます、画像を説明。

上記のMarkdownは次のようになります。

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

これをGhostマークダウンで使用してきましたが、うまく機能しています。

私が出てきた2つの答えを組み合わせると、見栄えがよくないかもしれませんが、
。

クリックすると特定のサイズのサムネイルが作成され、最大解像度の画像が表示されます。

[<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>

したがって、この方法で外部画像がサポートされます！

これは答えの中にないので、私はこれをそこに出すと思っただけです。:)

rmarkdownand 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があります。

これは私にとってはうまくいきますが、1行ではありませんが、うまくいくことを願っています。

<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マークダウン/ブックダウンで機能するソリューションを探しているすべての人にに、以前のソリューションのこれらは機能しない/機能しないか、わずかなが必要です：

ワーキング

• 追加{ 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レンダラーでレンダリングされます。

これをCorillaに実装しましたパターンは、ユーザーに基本的なHTMLに依存させることなく、既存のワークフローの期待に沿うものであると私が思うので、。お気に入りのツールが同様のパターンに従っていない場合は、機能のリクエストを送信する価値があります。

構文の例：

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

子猫の例：

Jupyter NotebookでのMarkdown画像添付ファイルのサイズ変更

jupyter_core-4.4.0＆jupyter Notebook を使用しています。

次のようにマークダウンに挿入して画像を添付する場合：

![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"/>

この機能はここで要求され、ローランによって約束されたように、これは実装されました。

ジョプリン固有の答えを理解するのにしばらく時間がかかりました。

フラスコ使用時（私はフラットページで使用しています）... markdownの呼び出し内の拡張機能で明示的に（デフォルトではないため）有効にすることでトリックが実行され、属性を使用できることがわかりました（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

そしてMarkdownで：

![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をlatexに変換しています。HTMLタグはここでは機能しません。

私の解決策は再実装することです \includegraphics

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

これは、HTMLへの変換後にCSSを使用することに似ています。