wake-up-neo.net

Modifica della dimensione dell'immagine in Markdown

Ho appena iniziato con Markdown. Mi piace, ma c'è una cosa che mi turba: 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. Sto chiedendo un ribasso generale, non solo come Github lo fa. 

636
cantdutchthis

Con determinate implementazioni di Markdown (tra cui Mou e Marked 2 (solo macOS)) è possibile aggiungere =WIDTHxHEIGHT dopo l'URL del file grafico per ridimensionare l'immagine. Non dimenticare lo spazio prima di =.

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

È possibile saltare l'altezza

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

Potresti semplicemente usare dell'HTML nel tuo Markdown:

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

Oppure tramite l'attributo style (non supportato da GitHub)

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

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

![drawing](drawing.jpg)

CSS in un altro file:

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

La risposta accettata qui non funziona con nessun editor Markdown disponibile nelle app che ho utilizzato fino alla data come Ghost, Stackedit.io o persino nell'editor di Stack Overflow. Ho trovato una soluzione alternativa qui nel tracker dei problemi di 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.

243
kushdilip

Basta usare:

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

invece di:

![](Assets/icon.png)

Forse questo è cambiato di recente ma il Kramdown docs mostra 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.

50
sayth

Se stai scrivendo MarkDown per PanDoc, puoi farlo:

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

Ciò aggiunge style="width: 50%;" al tag <img> HTML o [width=0.5\textwidth] a \includegraphics in LaTeX.

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

45
rudolfbyker

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

Markdown:

![minipic](mypic.jpg)

CSS:

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

Se sei usando kramdown , puoi fare questo:

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

Quindi aggiungi questo a il tuo Custom CSS :

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

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

Questo selettore corrisponderà a qualsiasi immagine con un tag alt che termina con "-fullwidth":

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

Quindi puoi ancora usare il tag alt per il suo scopo 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 Ghost, e ha funzionato bene.

10
bennetimo

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

Una buona soluzione pulita è sempre con sintassi pura html. 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>

In questo modo sono supportate le immagini esterne! 

Ho solo pensato di metterlo là fuori perché non è in nessuna delle risposte. :)

10
Umang Desai

Ho scriptato il semplice parser dei tag per l'utilizzo di un tag img di dimensione personalizzata in Jekyll .

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

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

È possibile aggiungere il file alla cartella _plugins.

8
nurinamu

Puoi usare anche questo 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 puoi aggiungere direttamente attributi arbitrari all'ultimo elemento html. Per aggiungere classi c'è un collegamento .class.secondclass .

5
rriemann

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

Dal momento che molte foto vengono caricate utilizzando il servizio Imgur , puoi usare le API dettagliate qui per cambiare la dimensione della foto.

Quando carichi una foto in un commento di GitHub, questa verrà aggiunta tramite Imgur, quindi questo sarà di grande aiuto se la foto è molto grande.

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

5
Iulian Onofrei

Per R-Markdown, nessuna delle soluzioni di cui sopra ha funzionato per me, quindi sono passato alla sintassi LaTeX regolare, che funziona perfettamente.

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

Quindi puoi utilizzare per es. l'istruzione \begin{center} per centrare l'immagine.

2
Knarpie

C'è modo di aggiungere classe e stile css

![pic][logo]{.classname}

quindi annota link e css sotto

[logo]: (picurl)

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

Riferimento qui

2
Cropse

Per quelli intereseted in una soluzione rmarkdown e knitr. Esistono alcuni modi per ridimensionare le immagini in un file .rmd senza l'uso di html:

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

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

Un'altra opzione è usare knitr::include_graphics:

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

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

Lo abbiamo implementato in Corilla poiché ritengo che lo schema 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 sollevare una richiesta di funzionalità. 

Esempio di sintassi: 

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

Esempio di gattino: 

 kitten

1
ddri

Quando si usa Flask (Lo sto usando con pagine piatte) ... Ho trovato che abilitare esplicitamente (non era di default per qualche motivo) 'attr_list' nelle estensioni all'interno della chiamata a markdown fa il trucco - e poi uno può 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}
1
mat

Se cambiare il markdown iniziale non è un'opzione per te, questo hack 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 messaggio di posta elettronica (come Outlook ignora qualsiasi stile di immagine css)

0
Yannickv