Question Changer la taille de l'image dans Markdown


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 ne donne que la suggestion suivante pour une image:

![drawing](drawing.jpg)

Si c'est possible, j'aimerais que l'image soit également centrée. Je demande une démarque générale, pas seulement comment github le fait.


528
2018-02-03 18:42


origine


Réponses:


Avec certaines implémentations de Markdown (y compris Mou et Marqué 2 (seulement macOS)) vous pouvez ajouter =WIDTHxHEIGHT après l'URL du fichier graphique pour redimensionner l'image. Ne pas oublier l'espace avant le =.

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

Vous pouvez ignorer la hauteur

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

295
2018-01-20 19:33



Vous pouvez simplement utiliser du HTML dans votre Markdown:

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

Ou via style attribut (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 alignement de l'image

![drawing](drawing.jpg)

CSS dans un autre fichier:

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

534
2018-02-07 09:26



La réponse acceptée ici ne fonctionne pas avec n'importe quel éditeur Markdown disponible dans les applications que j'ai utilisées jusqu'à ce jour comme Ghost, Stackedit.io ou même dans l'éditeur Stack Overflow. J'ai trouvé une solution de contournement ici dans le tracker de problème 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.


213
2018-02-23 17:52



Utilisez juste:

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

au lieu de:

![](Assets/icon.png)

80
2017-11-06 12:18



Peut-être que cela a récemment changé, mais le Kramdown docs montrer une solution simple.

De la docs

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.


37
2018-06-22 07:05



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

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

Cela ajoute style="width: 50%;" au HTML <img> tag, ou [width=0.5\textwidth] à \includegraphics dans LaTeX.

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


30
2017-12-15 16:40



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

Réduction:

![minipic](mypic.jpg)

CSS:

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

18
2017-10-28 12:36



Si vous êtes en utilisant kramdown, tu peux le faire:

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

Ensuite, ajoutez ceci à votre CSS personnalisé:

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

12
2018-02-04 08:51



Sur la base de Tiemes réponse, si vous utilisez CSS 3 vous pouvez utiliser un sélecteur de sous-chaîne:

Ce sélecteur correspondra à 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 pour son 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é ceci dans la démarque Ghost, et ça a bien fonctionné.


9
2017-12-31 16:32



J'ai scripté l'analyseur de balise simple pour l'utilisation d'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 _plugins dossier.


7
2017-09-07 23:16