Ho appena iniziato con Markdown. Lo adoro, ma c'è una cosa che mi infastidisce: come posso cambiare la dimensione di un'immagine usando Markdown?

La documentazione fornisce solo il seguente suggerimento per un'immagine:

![drawing](drawing.jpg)

Se è possibile, vorrei che anche l'immagine fosse centrata. Chiedo Markdown generale, non solo come fa GitHub.

Con alcune implementazioni di Markdown (inclusi Mou e Marked 2 (solo macOS)) è possibile aggiungere =WIDTHxHEIGHTdopo l'URL del file grafico per ridimensionare l'immagine. Non dimenticare lo spazio prima del =.

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

Puoi saltare ALTEZZA

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

Potresti semplicemente usare un po 'di HTML nel tuo Markdown:

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

O tramite styleattributo ( non supportato da GitHub )

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

Oppure potresti usare un file CSS personalizzato come descritto in questa risposta su Markdown e allineamento dell'immagine

![drawing](drawing.jpg)

CSS in un altro file:

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

La risposta accettata qui non funziona con nessun editor Markdown disponibile nelle app che ho usato fino ad oggi come Ghost, Stackedit.io o anche nell'editor Stack Overflow. Ho trovato una soluzione alternativa qui nel tracker dei problemi StackEdit.io .

La soluzione è utilizzare direttamente la sintassi HTML e funziona perfettamente:

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

Spero che questo possa essere d'aiuto.

Usa solo:

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

invece di:

![](Assets/icon.png)

Se stai scrivendo MarkDown per PanDoc, puoi farlo:

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

Questo aggiunge style="width: 50%;"al codice HTML <img>tag o [width=0.5\textwidth]per \includegraphicsin LaTeX.

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

Forse questo è cambiato di recente, ma i documenti di Kramdown mostrano una soluzione semplice.

Dai documenti

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

And here is a referenced ![smile]

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

Funziona su github con Jekyll e Kramdown.

Si potrebbe attingere altall'attributo che può essere impostato in quasi tutte le implementazioni / rendering Markdown insieme ai selettori CSS basati sui valori degli attributi. Il vantaggio è che si può facilmente definire un intero set di dimensioni dell'immagine diverse (e ulteriori attributi).

Markdown:

![minipic](mypic.jpg)

CSS:

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

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

Se stai usando kramdown , puoi farlo:

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

Quindi aggiungi questo al tuo CSS personalizzato :

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

Partendo dalla risposta di Tiemes, se stai usando CSS 3 puoi usare un selettore di sottostringa :

Questo selettore abbinerà qualsiasi immagine con un tag alt che termina con '-fullwidth':

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

Quindi è ancora possibile utilizzare il tag alt per lo scopo previsto per descrivere l'immagine.

Il Markdown per quanto sopra potrebbe essere qualcosa di simile:

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

Ho usato questo nel markdown di Ghost e ha funzionato bene.

Combinando due risposte sono uscito con una soluzione, che potrebbe non sembrare così carina,
ma funziona!

Crea una miniatura con una dimensione specifica che è possibile fare clic per visualizzare l'immagine con risoluzioni massime.

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

Ecco un esempio! L'ho provato su Visual Code e Github.

Sono venuto qui alla ricerca di una risposta. Alcuni fantastici suggerimenti qui. E le informazioni sull'oro che sottolineano che il markdown supporta completamente HTMl!

Una buona soluzione pulita è sempre quella di utilizzare la sintassi HTML pura. Con il tag.

Ma stavo cercando di attenermi ancora alla sintassi del markdown, quindi ho provato a racchiuderlo attorno a un tag e ho aggiunto tutti gli attributi che volevo per l'immagine all'interno del tag div. E FUNZIONA !!

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

Quindi in questo modo sono supportate le immagini esterne!

Ho solo pensato di pubblicarlo perché non è presente in nessuna delle risposte. :)

Per coloro che potrebbero interessare anche un rmarkdowne knitrsoluzione. Esistono alcuni modi per ridimensionare le immagini in un .rmdfile senza l'uso di html:

Puoi semplicemente specificare una larghezza per un'immagine aggiungendo {width=123px}. Non introdurre spazi bianchi tra le parentesi:

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

Un'altra opzione è utilizzare knitr::include_graphics:

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

Ho scritto il semplice parser di tag per l'utilizzo di un tag img di dimensioni personalizzate in Jekyll .

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

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

È possibile aggiungere il file alla _pluginscartella.

So che questa risposta è un po 'specifica, ma potrebbe aiutare gli altri bisognosi.

Poiché molte foto vengono caricate utilizzando il servizio Imgur , è possibile utilizzare l'API dettagliata qui per modificare le dimensioni della foto.

Quando si carica una foto in un commento di un problema di GitHub, verrà aggiunta tramite Imgur, quindi ciò sarà di grande aiuto se la foto è molto grande.

Fondamentalmente, invece di http://i.imgur.com/12345.jpg , dovresti inserire http://i.imgur.com/12345m.jpg per immagini di medie dimensioni.

Puoi usare questo anche con kramdown:

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

o

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

In questo modo è possibile aggiungere direttamente attributi arbitrari all'ultimo elemento html. Per aggiungere classi c'è un collegamento .class.secondclass .

Questo funziona per me non è in una riga ma spero che funzioni per te.

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

Per R-Markdown, nessuna delle soluzioni di cui sopra ha funzionato per me, quindi ho optato per la sintassi LaTeX normale , che funziona perfettamente.

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

Quindi è possibile utilizzare ad esempio l' \begin{center}istruzione per centrare l'immagine.

C'è modo con aggiungere classe e stile CSS

![pic][logo]{.classname}

quindi annota il link e il css di seguito

[logo]: (picurl)

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

Riferimento qui

Per tutti coloro che cercano soluzioni che funzionano con il markdown / bookdown R , queste delle soluzioni precedenti non funzionano o non richiedono un leggero adattamento:

Lavorando

• Aggiungi { width=50% }o{ width=50% height=50% }

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

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

  • Importante: nessuna virgola tra larghezza e altezza - cioè { width=50%, height=30% } non funzionerà !

• Aggiungere { height="36px" width="36px" }

  • ![foo](foo.png){ height="36px" width="36px" }
  • Nota: {:height="36px" width="36px"} con i due punti, come da @sayth, sembra non funzionare con il markdown R.

Non funziona:

• Aggiungere =WIDTHxHEIGHT
  • dopo l'URL del file grafico per ridimensionare l'immagine (come da @prosseek)
  • né =WIDTHxHEIGHT ![foo](foo.png =100x20)né =WIDTHsolo ![foo](foo.png =250x)lavoro

Se stai usando immagini di stile di riferimento di Github :

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


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

L'aggiunta di dimensioni relative all'URL di origine verrà visualizzata nella maggior parte dei renderer Markdown.

Lo abbiamo implementato in Corilla poiché ritengo che il modello segua le aspettative dei flussi di lavoro esistenti senza spingere l'utente a fare affidamento sull'HTML di base. Se il tuo strumento preferito non segue uno schema simile, vale la pena inoltrare una richiesta di funzionalità.

Esempio di sintassi:

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

Esempio di gattino:

Ridimensionamento degli allegati delle immagini Markdown nel quaderno Jupyter

Sto usando il jupyter_core-4.4.0notebook & jupyter.

Se stai allegando le tue immagini inserendole nel markdown in questo modo:

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

Questi attachmentcollegamenti non funzionano:

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

FARE QUESTO . Questo fa il lavoro.

Aggiungi solo parentesi div.

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

Spero che sia di aiuto!

Per riferimento futuro:

L'implementazione di Markdown per Joplin consente di controllare le dimensioni delle immagini importate nel modo seguente:

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

Questa funzione è stata richiesta qui e, come promesso da Laurent, è stata implementata.

Mi ci è voluto un po 'per capire la risposta specifica di Joplin.

Quando uso Flask (lo sto usando con pagine piatte) ... Ho scoperto che abilitare esplicitamente (non era di default per qualche motivo) 'attr_list' nelle estensioni all'interno della chiamata a markdown fa il trucco - e quindi si possono usare gli attributi (molto utile anche per accedere a CSS - class = "my class" per esempio ...).

FLATPAGES_HTML_RENDERER = prerender_jinja

e la funzione:

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

E poi in Markdown:

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

Per gli utenti IntelliJ IDEA , fare riferimento al plug- in Markdown Navigator .

L'anteprima visualizza immagini, badge, HTML, ecc.

Se la modifica del markdown iniziale non è un'opzione per te, questo trucco potrebbe funzionare:

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

Ho usato questo per essere in grado di ridimensionare le immagini prima di inviarle in un'e-mail (poiché Outlook ignora qualsiasi stile di immagine CSS)

La risposta di Tieme è la migliore per la maggior parte dei casi.

Nel mio caso, sto usando pandoc per convertire markdown in lattice. I tag HTML non funzioneranno qui.

La mia soluzione è reimplementare \includegraphics

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

È analogo all'utilizzo dei CSS dopo una conversione in HTML.