Ändern der Bildgröße in Markdown

920

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.

cantdutchthis
quelle
11
Ich schlage vor, die akzeptierte Antwort auf den Code zu ändern, der mit den meisten Abschrifteninterpreten kompatibel ist (dieser meiner Meinung nach stackoverflow.com/a/21972032/463225 ).
WattsInABox
Mögliches Duplikat von github README.md Mitte Bild
iNet
Microsoft hat auf seiner Seite einen Hinweis zur Markdown-Syntax :! Die Syntax zur Unterstützung der Bildgrößenänderung wird nur in Pull-Anfragen und im Wiki unterstützt. docs.microsoft.com/en-us/vsts/project/wiki/… Nicht sicher, ob dieser Syntaxkommentar für alle Markdowns oder nur für VSTS gültig ist.
Joe B

Antworten:

501

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)
prosseek
quelle
22
Beachten Sie auch, dass nach dem '=' kein Leerzeichen stehen darf. gut: "! [] (./ pic / pic1s.png = 250x)", schlecht: "! [] (./ pic / pic1s.png = 250x)"
cantdutchthis
17
Nicht im Standard, daher funktioniert es nicht mit jedem Markdown-Parser
Marius Soutier
19
Scheint nicht mit Redcarpet zu funktionieren, das ich mit Jekyll verwende, also würde ich mich für HTML entscheiden, wie @Tieme antwortete. Wenn Sie Ihren Markdown über einen Parser ausführen, der den Standard mag, wird der HTML-Code aktiviert.
user766353
7
funktioniert auch nicht im Bitbucket-Wiki. Es ist falsch in das titleAttribut konvertiert .
RZKY
6
Funktioniert nicht, aber der HTML-Code <img src = http // ... width = "..." height = "..."> funktioniert.
BK Batchelor
979

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; }
Tieme
quelle
42
Die Verwendung von Inline stylefunktioniert auf den meisten Websites (z. B. GitHub) nicht und wird bereinigt. Bevorzugen widthund heightstattdessen wie von @kushdillip erwähnt.
Ciro Santilli 法轮功 病毒 审查 六四 事件 22
2
Die auf dem alt-Attribut basierende Lösung ist sehr schlecht und sollte nicht verwendet werden, da sie die Zugänglichkeit beeinträchtigt .
Regnareb
Das Alt in Markdown setzt eine Beschriftung, das Alt in HTML macht etwas völlig anderes (setze Text, wenn die Figur nicht geladen werden kann).
Julien Colomb
Funktioniert auf Github mit dem Attribut width.
Shital Shah
Ich habe ein Bild in eine Tabelle gelegt und es hat besser funktioniert, es max-widthstattdessen zu verwenden, um sicherzustellen, dass die Bilder nicht gequetscht werden
kashiraja
325

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.

Kushdilip
quelle
11
Das hat bei mir super geklappt! Inline-CSS funktionierte nicht mit GitHub Markdown, aber die Höhen- / Breitenattribute der "alten Schule" funktionierten einwandfrei.
Nicholas Kreidberg
Gut ist, dass dies auch funktioniert, wenn Sie versuchen, einen Markdown-Viewer für lokale Dateien in einer Browser-Erweiterung / einem Browser-Add-On zu verwenden.
code_dredd
1
Github gefällt das.
Teoman Shipahi
1
Du rockst Mann! jetzt funktioniert es bei mir
Wesin Alves
Das ist großartig, außer nicht in meinen Ipython-Notizbüchern bei Github.
Eric
129

Benutz einfach:

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

anstatt:

![](Assets/icon.png)
Bartłomiej Semańczyk
quelle
1
Die meisten Markdown-Implementierungen haben hierfür eine geänderte Syntax, sodass Sie das rohe HTML-Tag nicht einfügen müssen. Dies ist jedoch die richtige Vorgehensweise, wenn die von Ihnen verwendete Implementierung keine hat.
Nick McCurdy
1
verdammtes Genie! arbeitet für GitHub =)))
Victor R. Oliveira
Dies ist kompatibel in github
thanos.a
Vielen Dank, dass Sie es einfach gemacht haben und die Änderung offensichtlich ist.
Marcy
67

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

rudolfbyker
quelle
1
Es ist sogar noch schöner, als die Größe in Punkten direkt anzugeben. Ich bin froh, dass Pandoc diesen Ansatz gewählt hat!
Jciloa
2
@ m0z4rt GitHub verwendet PanDoc wahrscheinlich nicht zum Rendern von MarkDown.
Rudolfbyker
63

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.

sayth
quelle
7
Vielleicht hat es in der Vergangenheit funktioniert, aber jetzt funktioniert es nicht auf Github. Das Hinzufügen eines altmodischen <img> -Tags mit Breite und Höhe funktioniert weiterhin.
Piratenemurray
2
Dies ist die beste Lösung, wenn Sie Kramdown oder Jekyll verwenden (das standardmäßig Kramdown verwendet).
Nick McCurdy
2
Block - Attribut als eine gute Option mit kramdown hier gezeigt. Die Syntax hier ist leicht falsch, weshalb @piratemurray möglicherweise Probleme hat. Es sollte sein {: height=36 width=36}; Dadurch werden HTML-Attribute generiert, daher sollte das pxSuffix nicht vorhanden sein . Alternativ können Sie CSS mit verwenden {: style="height:36px; width:36px"}.
Quantum7
Funktioniert für Jekyll! Danke. Ich brauche nicht einmal Höhe und Breite, nur eine ist genug. ![alt text](image.png){:height="36px" }
Matthias
1
Ich musste eine kleine Änderung vornehmen, damit dies in Jekyll richtig funktioniert. Diese Antwort gibt wie geschrieben fehlerhaftes HTML aus, da die Attribute widthund heightden Teil "px" enthalten. Für mich musste ich verwenden{:height="36" width="36"}
Maximillian Laumeister
23

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;
}
Petermeissner
quelle
Ist das nicht dasselbe wie Tiemes frühere Antwort ?
RedGrittyBrick
13
Dies ist ein Missbrauch des alt-Attributs und beeinträchtigt die Zugänglichkeit.
sbuck
2
Ja, es ist ein Hack, aber es scheint immer noch das einzige zu sein, was in allen Markdown-Varianten funktioniert. +1 für den Hinweis (Leute, die Screenreader verwenden, haben Probleme damit, oder? Sie werden auch Probleme mit all denen bekommen, die sich nicht darum kümmern, alt richtig zu verwenden).
Petermeissner
20

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

Prabhu
quelle
17

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;
}
Steven Penny
quelle
3
Ich würde empfehlen, die Breite nicht nur in CSS einzustellen. Es ist nützlich, dem Browser mitzuteilen, wie groß das Bildelement sein wird, bevor das Bild und das Stylesheet geladen sind, damit das Layout der Elemente um das Bild herum optimiert werden kann, ohne dass ein Reflow durchgeführt wird.
Nick McCurdy
13

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.

Bennetimo
quelle
1
Funktioniert auch perfekt mit kramdown + jekyll-3.1.2.
Subin Sebastian
Wenn Sie das Bild nicht in voller Breite rendern müssen, ist es besser, die Pixelgröße direkt auf dem Tag zu platzieren (nicht mit CSS).
Nick McCurdy
13

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. Beispiel Abschlag

proximab
quelle
1
Ausgezeichnet. Funktioniert mit GitLab Enterprise.
Sven Haile
10

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. :) :)

Umang Desai
quelle
1
Sie kann nicht Abschlags innerhalb von HTML setzen, müssen Sie ersetzen ![chilling](link)mit <img src="link" alt="chilling">.
Charl Kruger
10

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')
```
Symbolrush
quelle
2
Wie kann ich Höhe und Breite ändern? Für die erste Option speziell. Ich habe versucht, Höhe und Breite gleich zu setzen, bin {}aber gescheitert. Separate {}s scheitern auch.
NelsonGon
2
@ NelsonGon: Ich musste nie beides angeben, da die Höhe auch skaliert, wenn die Breite angegeben wird. Daher weiß ich nicht, ob das möglich wäre und wie ich es erreichen könnte. Gute Frage, obwohl ..
Symbolrush
2
Danke, ich dachte seitdem, ich kann es so machen : {height=x width=y}. Es scheint, dass diese Syntax keine Kommas erkennt, aber ich könnte andere Attribute einschließlich Stilelementen angeben.
NelsonGon
9

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.

Iulian Onofrei
quelle
7

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 .

rriemann
quelle
5

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>
Alfredo Castaneda
quelle
Das ist HTML, nicht Markdown ...
MappaM
4

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.

Knarpie
quelle
1
+1, aber besser gleich \centeringnach \begin{figure}oder nichts, wenn Sie `\ includegraphics [width = \ linewidth] {draw.jpg}` verwenden, sollte dies meiner Meinung nach die Standard-Pandoc-Ausgabe sein, zumindest wenn das Bild breiter als der Text ist.
Fran
4

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

Ernte
quelle
4

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
Außenseiter
quelle
4

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"

zardosht
quelle
3

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:

Kätzchen

ddri
quelle
Schade, dass es derzeit auf GitHub nicht funktioniert, aber ich würde trotzdem vorschlagen, eine Feature-Anfrage zu stellen.
ddri
3

Ä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!

MrFun
quelle
3

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.

smkj33
quelle
2

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}
Matte
quelle
1

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).

Yannickv
quelle
1

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.

Stewart
quelle