Modification de la taille de l'image dans Markdown


921

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.


11
Je suggère de changer la réponse acceptée au code compatible avec la plupart des interpréteurs de démarques (celui-ci, à mon avis, stackoverflow.com/a/21972032/463225 ).
WattsInABox


Microsoft a une note sur leur page pour la syntaxe Markdown:! La syntaxe pour prendre en charge le redimensionnement d'image n'est prise en charge que dans les demandes de tirage et le Wiki. docs.microsoft.com/en-us/vsts/project/wiki/… Je ne sais pas si ce commentaire de syntaxe est valable pour toutes les démarques, ou seulement pour VSTS.
Joe B

Réponses:


501

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)

22
notez également que vous ne pouvez pas avoir d'espace après le '='. bon: "! [] (./ pic / pic1s.png = 250x)", mauvais: "! [] (./ pic / pic1s.png = 250x)"
cantdutchthis

17
Pas dans la norme, donc cela ne fonctionne pas avec tous les analyseurs Markdown
Marius Soutier

19
Ne semble pas fonctionner avec Redcarpet, que j'utilise avec Jekyll, donc j'irais avec HTML, comme a répondu @Tieme. Si vous finissez par exécuter votre Markdown via un analyseur qui aime la norme, le code HTML se lèvera.
user766353

7
ne fonctionne pas aussi sur le wiki Bitbucket. il est incorrectement converti en titleattribut.
RZKY

6
Ne fonctionne pas, mais le HTML <img src = http // ... width = "..." height = "..."> fonctionne.
BK Batchelor

981

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; }

42
L'utilisation de l'inline stylene fonctionne pas sur la plupart des sites Web (par exemple GitHub), elle sera nettoyée. Préférez widthet à la heightplace comme mentionné par @kushdillip.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

2
La solution basée sur l'attribut alt est très mauvaise et vous ne devriez pas l'utiliser, cela rompt l' accessibilité .
Regnareb

L'alt in markdown met une légende, l'alt en html fait quelque chose de complètement différent (mettre du texte si la figure ne peut pas être chargée).
Julien Colomb

Fonctionne sur Github avec l'attribut width.
Shital Shah

Je mettais une image dans une table et cela fonctionnait mieux à la max-widthplace pour s'assurer que les images ne sont pas
écrasées

326

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.


11
Cela a très bien fonctionné pour moi! Le CSS en ligne ne fonctionnait pas avec GitHub Markdown mais les attributs hauteur / largeur "old school" fonctionnaient très bien.
Nicholas Kreidberg

Heureusement, celui-ci fonctionne également si vous essayez d'utiliser un visualiseur de démarques pour les fichiers locaux dans une extension / add-on de navigateur.
code_dredd

1
Github aime ça.
Teoman shipahi

1
vous rock homme! maintenant ça marche pour moi
Wesin Alves

C'est génial, sauf dans mes cahiers ipython sur github.
Eric

130

Utilisez simplement:

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

au lieu de:

![](Assets/icon.png)

1
La plupart des implémentations Markdown ont une syntaxe modifiée pour cela, vous n'avez donc pas besoin d'insérer la balise HTML brute, mais c'est la bonne chose à faire si l'implémentation que vous utilisez n'en a pas.
Nick McCurdy

1
sanglant génie! fonctionne pour GitHub =)))
Victor R. Oliveira

Ceci est compatible dans github
thanos.a

Merci d'avoir rendu les choses simples et le changement évident.
Marcy

67

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


1
C'est encore plus agréable que de spécifier directement la taille en points. Je suis heureux que ce soit l'approche que Pandoc a choisie!
jciloa

2
@ m0z4rt GitHub n'utilise probablement pas PanDoc pour rendre le MarkDown.
rudolfbyker

63

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.


7
Peut avoir fonctionné dans le passé mais ne fonctionne pas maintenant sur Github. L'ajout d'une balise <img> à l'ancienne avec largeur et hauteur fonctionne toujours.
piratemurray du

2
C'est la meilleure solution si vous utilisez Kramdown ou Jekyll (qui utilise Kramdown par défaut).
Nick McCurdy

2
Les attributs de bloc comme indiqué ici sont une bonne option avec kramdown. La syntaxe ici est légèrement erronée, ce qui peut expliquer pourquoi @piratemurray a des problèmes. Ça devrait être {: height=36 width=36}; cela génère des attributs HTML, il ne doit donc pas avoir le pxsuffixe. Alternativement, vous pouvez utiliser css avec {: style="height:36px; width:36px"}.
Quantum7

Fonctionne pour jekyll! THX. Je n'ai même pas besoin de hauteur et de largeur, une seule suffit. ![alt text](image.png){:height="36px" }
Matthias

1
J'ai dû faire un petit changement pour que cela fonctionne correctement dans Jekyll. Cette réponse donne des sorties HTML incorrectes, car les attributs widthet heightincluent la partie "px". Pour moi, je devais utiliser{:height="36" width="36"}
Maximillian Laumeister

23

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;
}

N'est-ce pas la même chose que la réponse précédente de Tieme ?
RedGrittyBrick

13
Il s'agit d'une mauvaise utilisation de l'attribut alt et nuit à l'accessibilité.
sbuck

2
Oui, c'est un hack MAIS semble toujours être la seule chose qui fonctionne à travers les saveurs Markdown. +1 pour avoir souligné cela (les personnes utilisant des lecteurs d'écran ont des problèmes avec ça? Ils auront aussi des problèmes avec tous ceux qui ne se soucient pas d'utiliser alt de la bonne façon).
petermeissner du

20

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


17

Si vous utilisez kramdown , vous pouvez le faire:

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

Ajoutez ensuite ceci à votre CSS personnalisé :

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

3
Je recommanderais de ne pas définir la largeur uniquement en CSS. Il est utile d'indiquer au navigateur la taille de l'élément d'image avant le chargement de l'image et de la feuille de style afin d'optimiser la disposition des éléments autour de l'image sans effectuer de refusion.
Nick McCurdy

13

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é.


1
Fonctionne également parfaitement sur kramdown + jekyll-3.1.2.
Subin Sebastian

Si vous n'avez pas besoin de rendre l'image à pleine largeur, il est préférable de mettre la taille des pixels directement sur la balise (pas avec CSS).
Nick McCurdy

13

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. Exemple de démarque


1
Excellent. Fonctionne avec GitLab Enterprise.
Sven Haile le

10

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. :)


1
Vous ne pouvez pas mettre de démarque à l'intérieur de HTML, vous devrez le remplacer ![chilling](link)par <img src="link" alt="chilling">.
Charl Kruger

10

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')
```

2
Comment puis-je changer la hauteur et la largeur? Pour la première option en particulier. J'ai essayé de mettre la hauteur et la largeur dans le même, {}mais j'ai échoué. Les {}s séparés échouent aussi.
NelsonGon

2
@NelsonGon: Je n'ai jamais eu besoin de spécifier les deux, car la hauteur évolue également lorsque la largeur est spécifiée. Je ne sais donc pas si cela serait possible et comment y parvenir. Bonne question, cependant ..
symbolrush

2
Merci, je compris depuis que je peux le faire comme ceci: {height=x width=y}. Il semble que cette syntaxe ne reconnaisse pas les virgules, mais je pourrais spécifier d'autres attributs, y compris des éléments de style.
NelsonGon


9

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.


7

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 .


5

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>

C'est du HTML, pas du Markdown ...
MappaM

4

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.


1
+1, mais mieux juste \centeringaprès \begin{figure}ou rien, si vous utilisez `\ includesegraphics [width = \ linewidth] {drawing.jpg}` que je pense que cela devrait être la sortie par défaut du pandoc au moins lorsque l'image est plus large que le texte.
Fran

4

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


4

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

4

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"


3

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:

chaton


Dommage que cela ne fonctionne pas sur GitHub à l'heure actuelle, mais je suggère tout de même de soulever une demande de fonctionnalité.
ddri

3

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!


3

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.


2

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}


1

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)


1

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.