comment changer la taille de l'image

Question

J'utilise Mou et je viens de commencer avec markdown. Je l'adore mais il y a une chose qui m'embête: comment puis-je changer la taille d'une image en utilisant le démarquage. Docs ne donne que la suggestion suivante pour une image:

 ![drawing](drawing.jpg)
 

Si possible, j'aimerais que l'image soit également centrée.

Answer 1

Vous pouvez simplement utiliser du HTML dans votre Markdown

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

Ou vous pouvez utiliser un fichier CSS personnalisé (De cette réponse: Markdown et l'alignement de l'image )

 ![drawing](drawing.jpg)
 

CSS dans un autre fichier:

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

Answer 2

Avec certaines implémentations Markdown 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)
 

Answer 3

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 sur l'éditeur Stackoverflow. J'ai trouvé une solution de contournement ici dans le suiveur de problème StackEdit.io .

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

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

J'espère que ça aide.

Answer 4

On pourrait s'inspirer de l' attribut alt qui peut être défini dans presque toutes les implémentations / rendus de Markdown avec les sélecteurs CSS basés 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;
}
 

Answer 5

Si vous utilisez kramdown , vous pouvez le faire

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

puis ajoutez ceci à votre CSS personnalisé

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