Ich habe gerade mit Markdown angefangen. Ich liebe es, aber eines nervt mich: Wie kann ich die Größe eines Bildes mit Markdown ändern?

Die Dokumentation enthält nur den folgenden Vorschlag für ein Bild:

![drawing](drawing.jpg)

Wenn es möglich ist, möchte ich, dass das Bild auch zentriert wird. Ich frage nach allgemeinem Markdown, nicht nur wie GitHub das macht.

Bei bestimmten Markdown-Implementierungen (einschließlich Mou und Marked 2 (nur macOS)) können Sie =WIDTHxHEIGHTnach der URL der Grafikdatei die Größe des Bildes anhängen . Vergessen Sie nicht den Platz vor dem =.

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

Sie können die HÖHE überspringen

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

Sie können einfach HTML in Ihrem Markdown verwenden:

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

Oder über ein styleAttribut ( wird von GitHub nicht unterstützt )

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

Sie können auch eine benutzerdefinierte CSS-Datei verwenden, wie in dieser Antwort zu Markdown und Bildausrichtung beschrieben

![drawing](drawing.jpg)

CSS in einer anderen Datei:

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

Die hier akzeptierte Antwort funktioniert nicht mit einem Markdown-Editor, der in den Apps verfügbar ist, die ich bis heute verwendet habe, wie Ghost, Stackedit.io oder sogar im Stack Overflow-Editor. Ich habe hier im StackEdit.io Issue Tracker eine Problemumgehung gefunden .

Die Lösung besteht darin, die HTML-Syntax direkt zu verwenden, und sie funktioniert perfekt:

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

Ich hoffe das hilft.

Benutz einfach:

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

anstatt:

![](Assets/icon.png)

Wenn Sie MarkDown für PanDoc schreiben, können Sie dies tun:

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

Dies fügt style="width: 50%;"zu dem HTML - <img>Tag oder [width=0.5\textwidth]an \includegraphicsin LaTeX.

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

Vielleicht hat sich dies kürzlich geändert, aber die Kramdown-Dokumente zeigen eine einfache Lösung.

Aus den Dokumenten

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

And here is a referenced ![smile]

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

Arbeitet auf Github mit Jekyll und Kramdown.

Man könnte auf das altAttribut zurückgreifen, das in fast allen Markdown-Implementierungen / Renderings zusammen mit CSS-Selektoren basierend auf Attributwerten festgelegt werden kann. Der Vorteil ist, dass man leicht eine ganze Reihe verschiedener Bildgrößen (und weiterer Attribute) definieren kann.

Abschlag:

![minipic](mypic.jpg)

CSS:

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

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

Wenn Sie kramdown verwenden , können Sie dies tun:

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

Fügen Sie dies dann Ihrem benutzerdefinierten CSS hinzu :

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

Aufbauend auf der Antwort von Tiemes können Sie bei Verwendung von CSS 3 einen Teilstring-Selektor verwenden :

Dieser Selektor ordnet jedem Bild ein Alt-Tag zu, das mit '-fullwidth' endet:

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

Dann können Sie das Alt-Tag weiterhin für den vorgesehenen Zweck verwenden , um das Bild zu beschreiben.

Der Abschlag für das oben Genannte könnte so etwas sein wie:

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

Ich habe dies in Ghost Markdown verwendet und es hat gut funktioniert.

Durch die Kombination von zwei Antworten kam ich zu einer Lösung, die vielleicht nicht so hübsch aussieht.
aber funktioniert!

Es wird eine Miniaturansicht mit einer bestimmten Größe erstellt, auf die Sie möglicherweise klicken, um zum Bild mit der maximalen Auflösung zu gelangen.

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

Hier ist ein Beispiel! Ich habe es auf Visual Code und Github getestet.

Ich kam hierher und suchte nach einer Antwort. Einige tolle Vorschläge hier. Und Goldinformationen, die darauf hinweisen, dass Markdown HTMl vollständig unterstützt!

Eine gute, saubere Lösung ist immer, mit reiner HTML-Syntax zu arbeiten. Mit dem Tag.

Aber ich habe versucht, mich immer noch an die Markdown-Syntax zu halten, also habe ich versucht, sie um ein Tag zu wickeln und alle gewünschten Attribute für das Bild innerhalb des div-Tags hinzuzufügen. Und es funktioniert!!

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

Auf diese Weise werden externe Bilder unterstützt!

Ich dachte nur, ich würde das da rausbringen, da es in keiner der Antworten steht. :) :)

Für diejenigen, die an einer rmarkdownund knitrLösung interessiert sind. Es gibt einige Möglichkeiten, die Größe von Bildern in einer .rmdDatei ohne Verwendung von zu ändernhtml :

Sie können einfach eine Breite für ein Bild angeben, indem Sie hinzufügen {width=123px}. Fügen Sie keine Leerzeichen zwischen den Klammern ein:

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

Eine andere Option ist knitr::include_graphics:

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

Ich habe den einfachen Tag-Parser für die Verwendung eines img-Tags in benutzerdefinierter Größe in Jekyll geschrieben .

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

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

Sie können die Datei zum _pluginsOrdner hinzufügen .

Ich weiß, dass diese Antwort etwas spezifisch ist, aber sie könnte anderen in Not helfen.

Da viele Fotos mit dem Imgur-Dienst hochgeladen werden , können Sie die hier beschriebene API verwenden , um die Größe des Fotos zu ändern.

Wenn Sie ein Foto in einen GitHub-Kommentar hochladen, wird es über Imgur hinzugefügt. Dies ist also sehr hilfreich, wenn das Foto sehr groß ist.

Grundsätzlich würden Sie anstelle von http://i.imgur.com/12345.jpg http://i.imgur.com/12345m.jpg für mittelgroße Bilder verwenden.

Sie können dieses auch mit kramdown verwenden:

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

oder

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

Auf diese Weise können Sie dem letzten HTML-Element direkt beliebige Attribute hinzufügen. Zum Hinzufügen von Klassen gibt es eine Verknüpfung .class.secondclass .

Dieser funktioniert für mich, es ist nicht in einer Zeile, aber ich hoffe, es funktioniert für Sie.

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

Für R-Markdown funktionierte keine der oben genannten Lösungen für mich, daher habe ich mich der regulären LaTeX- Syntax zugewandt, die einwandfrei funktioniert.

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

Dann können Sie zB die \begin{center}Anweisung verwenden, um das Bild zu zentrieren.

Es gibt einen Weg mit Klasse und CSS-Stil hinzufügen

![pic][logo]{.classname}

dann notiere Link und CSS unten

[logo]: (picurl)

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

Referenz hier

Für alle, die nach Lösungen suchen, die in R Markdown / Bookdown funktionieren , funktionieren / funktionieren diese der vorherigen Lösungen nicht oder müssen geringfügig angepasst werden:

Arbeiten

• Anhängen { width=50% }oder{ width=50% height=50% }

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

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

  • Wichtig: kein Komma zwischen Breite und Höhe - dh { width=50%, height=30% } funktioniert nicht !

• Anhängen { height="36px" width="36px" }

  • ![foo](foo.png){ height="36px" width="36px" }
  • Hinweis: {:height="36px" width="36px"} Mit Doppelpunkt, wie ab @sayth, scheint es nicht mit R-Markdown zu funktionieren

Funktioniert nicht:

• Anhängen =WIDTHxHEIGHT
  • nach der URL der Grafikdatei, um die Größe des Bildes zu ändern (ab @prosseek)
  • weder =WIDTHxHEIGHT ![foo](foo.png =100x20)noch =WIDTHnur ![foo](foo.png =250x)arbeiten

Wenn Sie Bilder im Github- Referenzstil verwenden:

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


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

Das Hinzufügen relativer Dimensionen zur Quell-URL wird in den meisten Markdown-Renderern gerendert.

Wir haben dies in Corilla implementiert da ich denke, dass das Muster den Erwartungen bestehender Workflows entspricht, ohne den Benutzer dazu zu zwingen, sich auf grundlegendes HTML zu verlassen. Wenn Ihr Lieblingswerkzeug keinem ähnlichen Muster folgt, lohnt es sich, eine Funktionsanforderung zu stellen.

Beispiel für Syntax:

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

Beispiel eines Kätzchens:

Ändern der Größe von Markdown-Bildanhängen in Jupyter Notebook

Ich benutze jupyter_core-4.4.0& jupyter Notebook.

Wenn Sie Ihre Bilder anhängen, indem Sie sie wie folgt in den Markdown einfügen:

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

Diese attachmentLinks funktionieren nicht :

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

TUN SIE DAS . Das funktioniert .

Fügen Sie einfach Div-Klammern hinzu.

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

Hoffe das hilft!

Zum späteren Nachschlagen:

Die Markdown-Implementierung für Joplin ermöglicht die Steuerung der Größe importierter Bilder auf folgende Weise:

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

Diese Funktion wurde hier angefordert und wie von Laurent versprochen implementiert.

Es dauerte eine Weile, bis ich die Joplin-spezifische Antwort gefunden hatte.

Bei der Verwendung von Flask (ich verwende es mit flachen Seiten) ... Ich habe festgestellt, dass die explizite Aktivierung (aus irgendeinem Grund nicht standardmäßig) von 'attr_list' in Erweiterungen innerhalb des Aufrufs zum Markdown den Trick ausführt - und dann kann man die Attribute verwenden (sehr nützlich auch, um auf CSS zuzugreifen - class = "my class" zum Beispiel ...).

FLATPAGES_HTML_RENDERER = prerender_jinja

und die Funktion:

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

Und dann in Markdown:

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

Für IntelliJ IDEA - Benutzer finden Sie in Markdown Navigator - Plugin.

Vorschau rendert Bilder, Abzeichen, HTML usw.

Wenn das Ändern des anfänglichen Abschlags für Sie keine Option ist, funktioniert dieser Hack möglicherweise:

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

Ich habe dies verwendet, um die Größe von Bildern vor dem Senden in einer E-Mail ändern zu können (da Outlook jegliches Bild-CSS-Styling ignoriert).

Tiemes Antwort ist in den meisten Fällen am besten.

In meinem Fall verwende ich Pandoc, um Markdown in Latex umzuwandeln. HTML-Tags funktionieren hier nicht.

Meine Lösung ist die Neuimplementierung \includegraphics

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

Dies entspricht der Verwendung von CSS nach einer Konvertierung in HTML.