web-dev-qa-db-ja.com

Markdownで画像サイズを変更する

Markdownを始めました。大好きですが、私を悩ませていることが1つあります。それは、Markdownを使用してイメージのサイズを変更する方法を教えてください。

ドキュメンテーションはイメージのために以下の提案を与えるだけです: 

![drawing](drawing.jpg)

それが可能であるならば、私は絵もまた中心に置かれることを望みます。私はgithubがそれをどのように行うかだけでなく、一般的な値下げを求めています。 

636
cantdutchthis

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

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

あなたはHEIGHTをスキップすることができます

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

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; }
682
Tieme

ここで認められている答えは、Ghost、Stackedit.ioのような私がこれまでに使ったことのあるアプリケーション、あるいはStack Overflowエディタでさえ使えるMarkdownエディタではうまくいきません。回避策を見つけました ここStackEdit.io問題トラッカー 。 

解決策は直接HTML構文を使用することです、そしてそれは完全に機能します:

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

これが役に立つことを願っています。

243
kushdilip

ただ使用してください:

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

の代わりに:

![](Assets/icon.png)

多分これは最近変更されましたが、 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"}

GekubでJekyllとKramdownを使って作業します。

50
sayth

あなたがPanDocのためにMarkDownを書いているなら、あなたはこれをすることができます:

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

これはHTMLのstyle="width: 50%;"タグに<img>を追加するか、LaTeXの[width=0.5\textwidth]\includegraphicsを追加します。

出典: http://pandoc.org/MANUAL.html#extension-link_attributes

45
rudolfbyker

alt属性 を、ほとんどすべてのMarkdown実装で設定できる/ renderes と一緒にCSSセレクター に基づいて描くことができます。利点は、異なるピクチャサイズ(およびその他の属性)のセット全体を簡単に定義できることです。 

マークダウン:

![minipic](mypic.jpg)

CSS:

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

もしあなたが kramdown を使っているならば、これを行うことができます

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

それからこれを あなたのカスタムCSS :に追加してください。

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

CSS 3 を使用している場合は、Tiemesの回答に基づいて、 部分文字列セレクタ を使用できます。

このセレクタは '-fullwidth'で終わるaltタグを持つ任意の画像にマッチします。

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

それでも、画像を記述するために 使用目的 にaltタグを使用することができます。

上記の値下げは、次のようになります。

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

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

10
bennetimo

私は答えを探してここに来た。ここでいくつかの素晴らしい提案。そして、その値下げがHTMlを完全にサポートしていることを指摘する金の情報が!

きれいな解決策としては、必ず純粋なhtml構文を使用することが確実です。タグ付き。

しかし、私はまだマークダウン構文に固執しようとしていたので、私はそれをタグの周りにラップしようとし、私がdivタグ内の画像に欲しい属性を追加しました。そしてそれはうまくいきます!

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

このようにして外部画像がサポートされます。 

それが答えのどれにもないように私がこれをそこに出すだろうとちょうど思った。 :)

10
Umang Desai

Jekyll でカスタムサイズのimgタグを使用するための単純なタグパーサーを作成しました。

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

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

ファイルを_pluginsフォルダーに追加できます。

8
nurinamu

これはkramdownでも使えます。

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

または

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

これにより、最後のhtml要素に任意の属性を直接追加することができます。クラスを追加するためのショートカットは .class.secondclass です。

5
rriemann

私はこの答えが少し具体的であることを知っています、しかしそれはそれを必要としている他の人を助けるかもしれません。

Imgurサービス を使用して多くの写真がアップロードされるので、 ここに詳述されているAPI を使用して写真のサイズを変更できます。

GitHub issue commentに写真をアップロードするとき、それはImgurを通して追加されるので、写真が非常に大きいならばこれは大いに役立ちます。

基本的に、 http://i.imgur.com/12345.jpg の代わりに、 http://i.imgur.com/12345m.jpg の中サイズの画像を入力します。

5
Iulian Onofrei

R-Markdownの場合、上記の解決策はどちらも私にはうまくいきませんでしたので、私は通常の LaTeX の構文を使いました。

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

それからあなたは使用することができます。画像を中央揃えにする\begin{center}ステートメント.

2
Knarpie

クラスとCSSスタイルを追加する方法があります

![pic][logo]{.classname}

それからリンクとcssを書き留めてください

[logo]: (picurl)

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

ここで参照してください

2
Cropse

rmarkdownknitrの解決策に興味がある人のために。 htmlを使用せずに.rmdファイル内の画像のサイズを変更する方法がいくつかあります。

{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')
```
1
symbolrush

ソースURLへの相対ディメンションの追加は、Markdownレンダラーの大部分でレンダリングされます。 

私はこのパターンを Corilla に実装しました。これは、ユーザーが基本的なHTMLに頼らなくても、既存のワークフローの期待に沿ったパターンだと思います。あなたのお気に入りのツールが似たようなパターンに従わないなら、それは機能要求を上げる価値があります。 

構文の例:  

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

子猫の例:  

kitten

1
ddri

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で:

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

今後の参考のために:

Joplin のMarkdown実装により、インポートされた画像のサイズを次の方法で制御できます。

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

この機能は here が要求され、 約束 として Laurent が実装されました。


ジョプリンの具体的な答えを理解するのに時間がかかりました。

0
smkj33

最初の値下げを変更することがあなたの選択肢ではない場合、このハックはうまくいくかもしれません:

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

電子メールで送信する前に画像のサイズを変更できるようにするためにこれを使用しました(Outlookでは画像のCSSスタイルは無視されるため)。

0
Yannickv

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

これを行う。これはdoes workです。

Div括弧を追加するだけです。

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

お役に立てれば!

0
MrFun

IntelliJ IDEA ユーザーについては、 Markdown Navigator プラグインを参照してください。

プレビューは、画像、バッジ、HTMLなどをレンダリングします。

Android Studio Markdown Preview

0