Je viens de commencer avec Markdown. Je l'adore, mais il y a une chose qui me dérange: comment puis-je changer la taille d'une image en utilisant Markdown?

La documentation donne seulement la suggestion suivante pour une image:

![drawing](drawing.jpg)

Si c'est possible, je voudrais que l'image soit également centrée. Je demande le Markdown général, pas seulement comment GitHub le fait.

Avec certaines implémentations Markdown (dont Mou et Marked 2 (uniquement macOS)), vous pouvez ajouter =WIDTHxHEIGHTaprès l'URL du fichier graphique pour redimensionner l'image. N'oubliez pas l'espace avant le =.

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

Vous pouvez sauter la HAUTEUR

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

Vous pouvez simplement utiliser du HTML dans votre Markdown:

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

Ou via un styleattribut ( non pris en charge par GitHub )

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

Ou vous pouvez utiliser un fichier CSS personnalisé comme décrit dans cette réponse sur Markdown et l'alignement de l'image

![drawing](drawing.jpg)

CSS dans un autre fichier:

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

La réponse acceptée ici ne fonctionne avec aucun éditeur Markdown disponible dans les applications que j'ai utilisées jusqu'à présent comme Ghost, Stackedit.io ou même dans l'éditeur Stack Overflow. J'ai trouvé une solution de contournement ici dans le suivi des problèmes StackEdit.io .

La solution consiste à utiliser directement la syntaxe HTML, et cela fonctionne parfaitement:

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

J'espère que ça aide.

Utilisez simplement:

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

au lieu de:

![](Assets/icon.png)

Si vous écrivez MarkDown pour PanDoc, vous pouvez le faire:

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

Cela s'ajoute style="width: 50%;"à la <img>balise HTML ou [width=0.5\textwidth]à \includegraphicsLaTeX.

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

Peut-être que cela a récemment changé, mais les documents de Kramdown montrent une solution simple.

À partir des documents

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

And here is a referenced ![smile]

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

Fonctionne sur github avec Jekyll et Kramdown.

On pourrait s'appuyer sur l' altattribut qui peut être défini dans presque toutes les implémentations / rendus Markdown avec des sélecteurs CSS basés sur les valeurs d'attribut. L'avantage est que l'on peut facilement définir un ensemble complet de différentes tailles d'image (et d'autres attributs).

Réduction:

![minipic](mypic.jpg)

CSS:

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

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

Si vous utilisez kramdown , vous pouvez le faire:

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

Ajoutez ensuite ceci à votre CSS personnalisé :

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

En s'appuyant sur la réponse de Tiemes, si vous utilisez CSS 3, vous pouvez utiliser un sélecteur de sous - chaîne :

Ce sélecteur fera correspondre n'importe quelle image avec une balise alt qui se termine par '-fullwidth':

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

Ensuite, vous pouvez toujours utiliser la balise alt dans le but prévu pour décrire l'image.

Le Markdown pour ce qui précède pourrait être quelque chose comme:

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

J'ai utilisé cela dans la démarque Ghost, et cela a bien fonctionné.

En combinant deux réponses, je suis sorti avec une solution, qui pourrait ne pas sembler aussi jolie,
mais ça marche!

Il crée une miniature avec une taille spécifique sur laquelle vous pouvez cliquer pour vous amener à l'image des résolutions maximales.

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

Voici un exemple! Je l'ai testé sur Visual Code et Github.

Je suis venu ici chercher une réponse. Quelques suggestions impressionnantes ici. Et des informations en or soulignant que le démarque prend complètement en charge HTMl!

Une bonne solution propre est toujours d'aller avec une syntaxe html pure à coup sûr. Avec le tag.

Mais j'essayais de m'en tenir à la syntaxe de démarque, j'ai donc essayé de l'enrouler autour d'une balise et j'ai ajouté les attributs que je voulais pour l'image à l'intérieur de la balise div. Et il fonctionne!!

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

Ainsi, les images externes sont prises en charge!

Je pensais juste que je mettrais cela là-bas, car ce n'est dans aucune des réponses. :)

Pour ceux qui sont interessés dans une solution rmarkdownet knitr. Il existe plusieurs façons de redimensionner des images dans un .rmdfichier sans utiliser html:

Vous pouvez simplement spécifier une largeur pour une image en ajoutant {width=123px}. N'introduisez pas d'espace entre les crochets:

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

Une autre option consiste à utiliser knitr::include_graphics:

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

J'ai scripté l'analyseur de balises simple pour utiliser une balise img de taille personnalisée dans Jekyll .

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

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

Vous pouvez ajouter le fichier au _pluginsdossier.

Je sais que cette réponse est un peu spécifique, mais elle pourrait aider d'autres personnes dans le besoin.

Comme de nombreuses photos sont téléchargées à l'aide du service Imgur , vous pouvez utiliser l'API détaillée ici pour modifier la taille de la photo.

Lorsque vous téléchargez une photo dans un commentaire de problème GitHub, elle sera ajoutée via Imgur, donc cela aidera beaucoup si la photo est très grande.

Fondamentalement, au lieu de http://i.imgur.com/12345.jpg , vous mettriez http://i.imgur.com/12345m.jpg pour une image de taille moyenne.

Vous pouvez également utiliser celui-ci avec kramdown:

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

ou

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

De cette façon, vous pouvez ajouter directement des attributs arbitraires au dernier élément html. Pour ajouter des classes, il existe un raccourci .class.secondclass .

Celui-ci fonctionne pour moi, ce n'est pas sur une ligne, mais j'espère que cela fonctionne pour vous.

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

Pour R-Markdown, aucune des solutions ci-dessus n'a fonctionné pour moi, donc je me suis tourné vers la syntaxe LaTeX régulière , qui fonctionne très bien.

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

Ensuite, vous pouvez utiliser par exemple l' \begin{center}instruction pour centrer l'image.

Il y a moyen d'ajouter une classe et un style CSS

![pic][logo]{.classname}

puis notez le lien et css ci-dessous

[logo]: (picurl)

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

Référence ici

Pour tous ceux qui recherchent des solutions qui fonctionnent dans R markdown / bookdown , celles des solutions précédentes ne fonctionnent pas / ne fonctionnent pas ou nécessitent une légère adaptation:

Travail

• Ajouter { width=50% }ou{ width=50% height=50% }

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

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

  • Important: pas de virgule entre largeur et hauteur - c'est-à-dire { width=50%, height=30% } ne fonctionnera pas !

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

  • ![foo](foo.png){ height="36px" width="36px" }
  • Remarque: {:height="36px" width="36px"} avec deux points, comme de @sayth, ne semble pas fonctionner avec le markdown R

Ca ne fonctionne pas:

• Ajouter =WIDTHxHEIGHT
  • après l'URL du fichier graphique pour redimensionner l'image (à partir de @prosseek)
  • ni , =WIDTHxHEIGHT ![foo](foo.png =100x20)ni =WIDTHque le ![foo](foo.png =250x)travail

Si vous utilisez des images de style de référence 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'ajout de dimensions relatives à l'URL source sera rendu dans la majorité des rendus Markdown.

Nous avons implémenté cela dans Corilla car je pense que le modèle est celui qui suit les attentes des flux de travail existants sans pousser l'utilisateur à se fier au HTML de base. Si votre outil préféré ne suit pas un modèle similaire, cela vaut la peine de lancer une demande de fonctionnalité.

Exemple de syntaxe:

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

Exemple de chaton:

Redimensionner les pièces jointes des images Markdown dans le bloc-notes Jupyter

J'utilise jupyter_core-4.4.0& jupyter notebook.

Si vous joignez vos images en les insérant dans le démarque comme ceci:

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

Ces attachmentliens ne fonctionnent pas :

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

FAITES CECI . Cela fait le travail.

Ajoutez simplement des parenthèses div.

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

J'espère que cela t'aides!

Pour référence future:

L'implémentation de Markdown pour Joplin permet de contrôler la taille des images importées de la manière suivante:

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

Cette fonctionnalité a été demandée ici et comme promis par Laurent elle a été mise en œuvre.

Il m'a fallu un certain temps pour comprendre la réponse spécifique de Joplin.

Lors de l'utilisation de Flask (je l'utilise avec des pages plates) ... J'ai trouvé que l'activation explicite (n'était pas par défaut pour une raison quelconque) 'attr_list' dans les extensions dans l'appel à markdown fait l'affaire - et alors on peut utiliser les attributs (très utile aussi pour accéder à CSS - class = "ma classe" par exemple ...).

FLATPAGES_HTML_RENDERER = prerender_jinja

et la fonction:

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

Et puis dans Markdown:

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

Pour les utilisateurs d' IntelliJ IDEA , veuillez vous référer au plugin Markdown Navigator .

L'aperçu rend les images, les badges, le HTML, etc.

Si la modification de la démarque initiale n'est pas une option pour vous, ce hack peut fonctionner:

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

J'ai utilisé cela pour pouvoir redimensionner les images avant de les envoyer dans un e-mail (car Outlook ignore tout style d'image CSS)

La réponse de Tieme est la meilleure pour la plupart des cas.

Dans mon cas, j'utilise pandoc pour convertir le démarque en latex. Les balises HTML ne fonctionneront pas ici.

Ma solution est de réimplémenter \includegraphics

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

Le est analogue à l'utilisation de CSS après une conversion en HTML.