Cambiar el tamaño de la imagen en Markdown


920

Acabo de empezar con Markdown. Me encanta, pero hay una cosa que me molesta: ¿cómo puedo cambiar el tamaño de una imagen usando Markdown?

La documentación solo da la siguiente sugerencia para una imagen:

![drawing](drawing.jpg)

Si es posible, me gustaría que la imagen también esté centrada. Estoy pidiendo Markdown general, no solo cómo lo hace GitHub.


11
Sugiero cambiar la respuesta aceptada al código que sea compatible con la mayoría de los intérpretes de descuento (este, en mi opinión, stackoverflow.com/a/21972032/463225 ).
WattsInABox

Posible duplicado de la imagen central
iNet

Microsoft tiene una nota en su página para Markdown Syntax:! La sintaxis para admitir el cambio de tamaño de la imagen solo se admite en solicitudes de extracción y Wiki. docs.microsoft.com/en-us/vsts/project/wiki/… No estoy seguro de si este comentario de sintaxis es válido para todas las rebajas o solo para VSTS.
Joe B

Respuestas:


501

Con ciertas implementaciones de Markdown (incluidas Mou y Marked 2 (solo macOS)) puede agregar =WIDTHxHEIGHTdespués de la URL del archivo gráfico para cambiar el tamaño de la imagen. No olvides el espacio antes del =.

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

Puedes saltarte la ALTURA

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

22
También tenga en cuenta que no puede tener un espacio después de '='. bueno: "! [] (./ pic / pic1s.png = 250x)", malo: "! [] (./ pic / pic1s.png = 250x)"
cantdutchthis

17
No está en el estándar, por lo que no funciona con todos los analizadores Markdown
Marius Soutier

19
Parece que no funciona con Redcarpet, que uso con Jekyll, así que iría con HTML, como respondió @Tieme. Si termina ejecutando su Markdown a través de un analizador que le gusta el estándar, el HTML se mantendrá.
user766353

77
no funciona en Bitbucket wiki también. se convirtió erróneamente en el titleatributo
RZKY

66
No funciona, pero el HTML <img src = http // ... width = "..." height = "..."> funciona.
BK Batchelor

981

Podrías usar algo de HTML en tu Markdown:

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

O a través del styleatributo ( no compatible con GitHub )

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

O puede usar un archivo CSS personalizado como se describe en esta respuesta en Markdown y alineación de imágenes

![drawing](drawing.jpg)

CSS en otro archivo:

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

42
El uso en línea styleno funciona en la mayoría de los sitios web (por ejemplo, GitHub), se desinfectará. Prefiero widthy en su heightlugar como lo menciona @kushdillip.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

2
La solución basada en el atributo alt es muy mala y no debe usarla, rompe la accesibilidad .
Regnareb

El alt en markdown pone un título, el alt en html hace algo completamente diferente (poner texto si la figura no se puede cargar).
Julien Colomb

Funciona en Github con atributo de ancho.
Shital Shah

Estaba poniendo una imagen en una tabla y funcionó mejor usarla max-widthpara garantizar que las imágenes no se
aplastaran

326

La respuesta aceptada aquí no funciona con ningún editor de Markdown disponible en las aplicaciones que he usado hasta la fecha como Ghost, Stackedit.io o incluso en el editor Stack Overflow. Encontré una solución aquí en el rastreador de problemas StackEdit.io .

La solución es usar directamente la sintaxis HTML, y funciona perfectamente:

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

Espero que esto ayude.


11
¡Esto funciono muy bien para mi! El CSS en línea no funcionaba con GitHub Markdown, pero los atributos de altura / anchura de la "vieja escuela" funcionaban bien.
Nicholas Kreidberg

Lo bueno es que este también funciona si está intentando usar un visor de rebajas para archivos locales en una extensión / complemento del navegador.
code_dredd el

1
A Github le gusta esto.
Teoman shipahi

1
eres un hombre rockero! ahora funciona para mí
Wesin Alves

Esto es genial, excepto en mis cuadernos de ipython en github.
Eric

129

Solo usa:

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

en vez de:

![](Assets/icon.png)

1
La mayoría de las implementaciones de Markdown tienen una sintaxis modificada para esto, por lo que no necesita insertar la etiqueta HTML sin formato, pero esto es lo correcto si la implementación que está utilizando no tiene una.
Nick McCurdy

1
Genio sangriento! funciona para GitHub =)))
Victor R. Oliveira

Esto es compatible en github
thanos.a

Gracias por hacerlo simple y el cambio obvio.
Marcy

67

Si está escribiendo MarkDown para PanDoc, puede hacer esto:

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

Esto se suma style="width: 50%;"a la de HTML <img>etiqueta, o [width=0.5\textwidth]al \includegraphicsde látex.

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


1
Es incluso mejor que especificar el tamaño en puntos directamente. ¡Me alegra que este sea el enfoque que Pandoc ha elegido!
jciloa

2
@ m0z4rt GitHub probablemente no usa PanDoc para representar el MarkDown.
Rudolfbyker

63

Tal vez esto ha cambiado recientemente, pero los documentos de Kramdown muestran una solución simple.

De los documentos

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

And here is a referenced ![smile]

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

Trabaja en github con Jekyll y Kramdown.


77
Puede haber funcionado en el pasado pero ahora no funciona en Github. Agregar una antigua etiqueta <img> con ancho y alto todavía funciona.
piratemurray

2
Esta es la mejor solución si está usando Kramdown o Jekyll (que usa Kramdown por defecto).
Nick McCurdy

2
Los atributos de bloque como se muestran aquí son una buena opción con kramdown. La sintaxis aquí es ligeramente incorrecta, por lo que @piratemurray está teniendo problemas. Debería ser {: height=36 width=36}; esto genera atributos HTML, por lo que no debería tener el pxsufijo. Alternativamente, puede usar CSS con {: style="height:36px; width:36px"}.
Quantum7

Funciona para jekyll! gracias. Ni siquiera necesito altura y anchura, solo una es suficiente. ![alt text](image.png){:height="36px" }
Matthias

1
Tuve que hacer un pequeño cambio para que esto funcione correctamente en Jekyll. Esta respuesta como está escrita genera HTML con formato incorrecto, ya que los atributos widthy heightincluyen la parte "px". Para mí necesitaba usar{:height="36" width="36"}
Maximillian Laumeister

23

Uno podría recurrir al altatributo que se puede establecer en casi todas las implementaciones / procesadores de Markdown junto con selectores CSS basados ​​en valores de atributo. La ventaja es que se puede definir fácilmente un conjunto completo de diferentes tamaños de imagen (y otros atributos).

Reducción:

![minipic](mypic.jpg)

CSS:

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

¿No es esto lo mismo que la respuesta anterior de Tieme ?
RedGrittyBrick

13
Este es un mal uso del atributo alt y perjudica la accesibilidad.
sbuck

2
Sí, es un truco PERO todavía parece ser lo único que funciona en todos los sabores de Markdown. +1 por señalar eso (¿las personas que usan lectores de pantalla tienen problemas con eso? También tendrán problemas con todos aquellos que no se molestan en usar alt de la manera correcta).
petermeissner el

20

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


17

Si está utilizando kramdown , puede hacer esto:

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

Luego agregue esto a su CSS personalizado :

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

3
Recomendaría no establecer el ancho solo en CSS. Es útil decirle al navegador qué tan grande será el elemento de imagen antes de que se carguen la imagen y la hoja de estilo para que pueda optimizar el diseño de los elementos alrededor de la imagen sin hacer un reflujo.
Nick McCurdy el

13

Partiendo de la respuesta de Tiemes, si está usando CSS 3 puede usar un selector de subcadena :

Este selector coincidirá con cualquier imagen con una etiqueta alt que termine con '-fullwidth':

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

Entonces todavía puede usar la etiqueta alt para su propósito previsto para describir la imagen.

El Markdown para lo anterior podría ser algo como:

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

He estado usando esto en Ghost Markdown, y ha estado funcionando bien.


1
Funciona perfectamente en kramdown + jekyll-3.1.2 también.
Subin Sebastian

Si no necesita renderizar la imagen en todo su ancho, es mejor colocar el tamaño de píxel directamente en la etiqueta (no con CSS).
Nick McCurdy

13

Combinando dos respuestas salí con una solución, que podría no verse tan bonita,
pero funciona!

Crea una miniatura con un tamaño específico en el que se puede hacer clic para llevarlo a la imagen de resolución máxima.

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

Aquí hay un ejemplo! Lo probé en Visual Code y Github. Ejemplo de rebaja


1
Excelente. Funciona con GitLab Enterprise.
Sven Haile

10

Vine aquí buscando una respuesta. Algunas sugerencias increíbles aquí. ¡Y la información de oro que señala que Markdown es totalmente compatible con HTMl!

Una buena solución limpia es siempre ir con sintaxis html pura con seguridad. Con la etiqueta

Pero todavía intentaba mantener la sintaxis de reducción, así que traté de envolverla alrededor de una etiqueta y agregué los atributos que quería para la imagen dentro de la etiqueta div. ¡¡Y funciona!!

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

¡De esta forma se admiten imágenes externas!

Solo pensé en publicar esto, ya que no está en ninguna de las respuestas. :)


1
No puede poner una rebaja dentro de HTML, deberá reemplazarlo ![chilling](link)por <img src="link" alt="chilling">.
Charl Kruger

10

Para aquellos interesados ​​en una rmarkdowny knitrsolución. Hay algunas formas de cambiar el tamaño de las imágenes en un .rmdarchivo sin el uso de html:

Simplemente puede especificar un ancho para una imagen agregando {width=123px}. No introduzca espacios en blanco entre los corchetes:

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

Otra opción es usar knitr::include_graphics :

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

2
¿Cómo puedo cambiar tanto la altura como el ancho? Para la primera opción específicamente. Traté de poner altura y anchura en el mismo {}pero fallé. Los {}s separados también fallan.
NelsonGon

2
@NelsonGon: nunca necesité especificar ambos, ya que la altura también se escala, cuando se especifica el ancho. Por lo tanto, no sé si eso sería posible y cómo lograrlo. Buena pregunta, sin embargo ..
symbolrush

2
Gracias, ya que supuso que puedo hacerlo de esta manera: {height=x width=y}. Parece que esta sintaxis no reconoce comas, pero podría especificar otros atributos, incluidos los elementos de estilo.
NelsonGon


9

Sé que esta respuesta es un poco específica, pero podría ayudar a otros que la necesitan.

Como muchas fotos se cargan usando el servicio Imgur , puede usar la API detallada aquí para cambiar el tamaño de la foto.

Al cargar una foto en un comentario de problema de GitHub, se agregará a través de Imgur, por lo que esto ayudará mucho si la foto es muy grande.

Básicamente, en lugar de http://i.imgur.com/12345.jpg , pondría http://i.imgur.com/12345m.jpg para una imagen de tamaño mediano.


7

También podría usar este con kramdown:

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

o

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

De esta manera, puede agregar directamente atributos arbitrarios al último elemento html. Para agregar clases hay un atajo .class.secondclass .


5

Este funciona para mí, no está en una línea, pero espero que funcione para ti.

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

Eso es HTML, no Markdown ...
MappaM

4

Para R-Markdown, ninguna de las soluciones anteriores funcionó para mí, así que recurrí a la sintaxis regular de LaTeX , que funciona bien.

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

Luego puede usar, por ejemplo, la \begin{center}declaración para centrar la imagen.


1
+1, pero mejor justo \centeringdespués \begin{figure}o nada, si usa `\ includegraphics [width = \ linewidth] {drawing.jpg}` que creo que debería ser la salida de pandoc predeterminada al menos cuando la imagen es más ancha que el texto.
Fran

4

Hay manera con agregar clase y estilo CSS

![pic][logo]{.classname}

luego escriba el enlace y css a continuación

[logo]: (picurl)

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

Referencia aquí


4

Para todos los que buscan soluciones que funcionen en R markdown / bookdown , estas de las soluciones anteriores no funcionan o necesitan una ligera adaptación:

Trabajando

  • Anexar { width=50% }o{ width=50% height=50% }

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

    • Importante: no hay coma entre ancho y alto, es decir { width=50%, height=30% } , ¡no funcionará !

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

    • ![foo](foo.png){ height="36px" width="36px" }
    • Nota: {:height="36px" width="36px"} con dos puntos, a partir de @sayth, parece que no funciona con R markdown

No funciona:

  • Adjuntar =WIDTHxHEIGHT
    • después de la URL del archivo gráfico para cambiar el tamaño de la imagen (como @prosseek)
    • ni =WIDTHxHEIGHT ![foo](foo.png =100x20)tampoco =WIDTHsolo ![foo](foo.png =250x)trabajo

4

Si está utilizando imágenes de estilo de referencia de 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

La adición de dimensiones relativas a la URL de origen se representará en la mayoría de los procesadores de Markdown.

Implementamos esto en Corilla, ya que creo que el patrón es uno que sigue las expectativas de los flujos de trabajo existentes sin presionar al usuario a confiar en HTML básico. Si su herramienta favorita no sigue un patrón similar, vale la pena plantear una solicitud de función.

Ejemplo de sintaxis:

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

Ejemplo de gatito:

gatito


Es una pena que no funcione en GitHub en este momento, pero sugeriría plantear una solicitud de características de todos modos.
ddri

3

Cambiar el tamaño de los archivos adjuntos de imágenes de Markdown en Jupyter Notebook

Estoy usando jupyter_core-4.4.0& jupyter notebook.

Si está adjuntando sus imágenes insertándolas en la rebaja de esta manera:

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

Estos attachmentenlaces no funcionan:

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

Hacer esto . Esto hace el trabajo.

Solo agrega corchetes div.

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

¡Espero que esto ayude!


3

Para futura referencia:

La implementación de Markdown para Joplin permite controlar el tamaño de las imágenes importadas de la siguiente manera:

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

Se solicitó esta característica aquí y como prometida por Laurent esto se ha implementado.


Me tomó un tiempo entender la respuesta específica de Joplin.


2

Cuando uso Flask (lo estoy usando con páginas planas) ... descubrí que habilitar explícitamente (no fue por defecto por alguna razón) 'attr_list' en extensiones dentro de la llamada a markdown hace el truco, y luego uno puede usar los atributos (muy útil también para acceder a CSS - class = "my class" por ejemplo ...).

FLATPAGES_HTML_RENDERER = prerender_jinja

y la función:

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

Y luego en Markdown:

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


1

Si cambiar la reducción inicial no es una opción para usted, este truco podría funcionar:

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

Utilicé esto para poder cambiar el tamaño de las imágenes antes de enviarlas en un correo electrónico (ya que Outlook ignora cualquier estilo de imagen CSS)


1

La respuesta de Tieme es la mejor para la mayoría de los casos.

En mi caso, estoy usando pandoc para convertir markdown a latex. Las etiquetas HTML no funcionarán aquí.

Mi solución es volver a implementar \includegraphics

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

El es análogo al uso de CSS después de una conversión a HTML.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.