Markdownで画像サイズを変更する
Markdownを始めました。大好きですが、私を悩ませていることが1つあります。それは、Markdownを使用してイメージのサイズを変更する方法を教えてください。
ドキュメンテーションはイメージのために以下の提案を与えるだけです：
それが可能であるならば、私は絵もまた中心に置かれることを望みます。私はgithubがそれをどのように行うかだけでなく、一般的な値下げを求めています。
MarkdownでHTMLを使うことができます：
<img src="drawing.jpg" alt="drawing" width="200"/>
あるいはstyle属性（ GitHubではサポートされていません ）
<img src="drawing.jpg" alt="drawing" style="width:200px;"/>
あるいは、マークダウンと画像の配置についてのこの回答で説明されているようにカスタムCSSファイルを使用することもできます
別のファイル内の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">
の代わりに：
多分これは最近変更されましたが、 Kramdownのドキュメント は簡単な解決策を示しています。
ドキュメントから
Here is an inline {:height="36px" width="36px"}.
And here is a referenced ![smile]
[smile]: smile.png
{: height="36px" width="36px"}
GekubでJekyllとKramdownを使って作業します。
あなたがPanDocのためにMarkDownを書いているなら、あなたはこれをすることができます：
{ width=50% }
これはHTMLのstyle="width: 50%;"タグに<img>を追加するか、LaTeXの[width=0.5\textwidth]に\includegraphicsを追加します。
alt属性 を、ほとんどすべてのMarkdown実装で設定できる/ renderes と一緒にCSSセレクター に基づいて描くことができます。利点は、異なるピクチャサイズ（およびその他の属性）のセット全体を簡単に定義できることです。
マークダウン：
CSS：
img[alt="minipic"] {
max-width: 20px;
display: block;
}
もしあなたが kramdown を使っているならば、これを行うことができます
{:.foo}
それからこれを あなたのカスタムCSS ：に追加してください。
.foo {
text-align: center;
width: 100px;
}
私は答えを探してここに来た。ここでいくつかの素晴らしい提案。そして、その値下げがHTMlを完全にサポートしていることを指摘する金の情報が！
きれいな解決策としては、必ず純粋なhtml構文を使用することが確実です。タグ付き。
しかし、私はまだマークダウン構文に固執しようとしていたので、私はそれをタグの周りにラップしようとし、私がdivタグ内の画像に欲しい属性を追加しました。そしてそれはうまくいきます！
<div style="width:50%"></div>
このようにして外部画像がサポートされます。
それが答えのどれにもないように私がこれをそこに出すだろうとちょうど思った。 :)
Jekyll でカスタムサイズのimgタグを使用するための単純なタグパーサーを作成しました。
https://Gist.github.com/nurinamu/4ccf7197a1bdfb0d7079
{% img /path/to/img.png 100x200 %}
ファイルを_pluginsフォルダーに追加できます。
これはkramdownでも使えます。
markdown
{:.some-css-class style="width: 200px"}
または
markdown
{:.some-css-class width="200"}
これにより、最後のhtml要素に任意の属性を直接追加することができます。クラスを追加するためのショートカットは .class.secondclass です。
私はこの答えが少し具体的であることを知っています、しかしそれはそれを必要としている他の人を助けるかもしれません。
Imgurサービス を使用して多くの写真がアップロードされるので、 ここに詳述されているAPI を使用して写真のサイズを変更できます。
GitHub issue commentに写真をアップロードするとき、それはImgurを通して追加されるので、写真が非常に大きいならばこれは大いに役立ちます。
基本的に、 http://i.imgur.com/12345.jpg の代わりに、 http://i.imgur.com/12345m.jpg の中サイズの画像を入力します。
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>
rmarkdownとknitrの解決策に興味がある人のために。 htmlを使用せずに.rmdファイル内の画像のサイズを変更する方法がいくつかあります。
{width=123px}を追加することで画像の幅を簡単に指定できます。大括弧の間に空白を入れないでください。
{width=250px}
別のオプションはknitr::include_graphicsを使うことです：
```{r, fig.cap="image description", out.width = '50%'}
knitr::include_graphics('your-image.png')
```
ソースURLへの相対ディメンションの追加は、Markdownレンダラーの大部分でレンダリングされます。
私はこのパターンを Corilla に実装しました。これは、ユーザーが基本的なHTMLに頼らなくても、既存のワークフローの期待に沿ったパターンだと思います。あなたのお気に入りのツールが似たようなパターンに従わないなら、それは機能要求を上げる価値があります。
構文の例：
子猫の例：
Flask を使用するとき（私はフラットページで使用しています）... 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で：
{: width=200px}
最初の値下げを変更することがあなたの選択肢ではない場合、このハックはうまくいくかもしれません：
newHtml = oldHtml.replace(/<img/g, '<img height="100"');
電子メールで送信する前に画像のサイズを変更できるようにするためにこれを使用しました（Outlookでは画像のCSSスタイルは無視されるため）。
Jupyter Notebookでのマークダウンイメージの添付ファイルのサイズ変更
私はjupyter_core-4.4.0とjupyterノートブックを使用しています。
次のようにマークダウンに画像を挿入して画像を添付する場合：
これらのattachmentリンクしない動作：
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
これを行う。これはdoes workです。
Div括弧を追加するだけです。
<div>
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
</div>
お役に立てれば！
