Cambiar el tamaño de la imagen en Markdown

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 se centre. Estoy pidiendo rebajas generales, no solo cómo lo hace github.

Con ciertas implementaciones de Markdown (incluidos Mou y Marked 2 (solo macOS)) puede agregar =WIDTHxHEIGHT despué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) 

Puede saltear la ALTURA

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

Puedes usar algo de HTML en tu Markdown:

 drawing 

O a través del atributo de style ( no soportado por GitHub )

 drawing 

O podría usar un archivo CSS personalizado como se describe en esta respuesta sobre el ajuste y la alineación de la imagen

 ![drawing](https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown/drawing.jpg) 

CSS en otro archivo:

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

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 syntax HTML, y funciona perfectamente:

  

Espero que esto ayude.

Solo usa:

  

en lugar de:

 ![](https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown/Assets/icon.png) 

Quizás 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"} 

Funciona en github con Jekyll y Kramdown.

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

 ![drawing](https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown/drawing.jpg){ width=50% } 

Esto agrega style="width: 50%;" a la etiqueta HTML , o [width=0.5\textwidth] a \includegraphics en LaTeX.

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

Uno podría recurrir al atributo alt que se puede establecer en casi todas las implementaciones de Markdown junto con los selectores de CSS en función de los valores de los atributos. La ventaja es que uno 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; } 

Si está utilizando kramdown , puede hacer esto:

 {:.foo} ![drawing](https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown/drawing.jpg) 

A continuación, agregue esto a su CSS personalizado :

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

A partir de la respuesta de Tiemes, si está utilizando CSS 3 puede usar un selector de subcadenas :

Este selector hará coincidir 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 así como:

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

He estado usando esto en el descuento de Ghost, y ha estado funcionando bien.

Escribí el analizador de tags simple para usar una etiqueta de img de tamaño personalizado en Jekyll .

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

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

Puede agregar el archivo a la carpeta _plugins .

Vine aquí buscando una respuesta. Algunas sugerencias increíbles aquí. ¡Y la información de oro que señala que markdown admite HTMl por completo!

Una buena solución limpia siempre es ir con syntax html pura de seguro. Con la etiqueta.

Pero estaba tratando de seguir apegado a la syntax de reducción, así que intenté envolverlo alrededor de una etiqueta y agregué los atributos que quería para la imagen dentro de la etiqueta div. ¡¡Y funciona!!

 
![Chilling](https://www.w3schools.com/w3images/fjords.jpg)

¡De esta manera, las imágenes externas son compatibles!

Solo pensé en poner esto por ahí ya que no está en ninguna de las respuestas. 🙂

Podrías usar este también con kramdown:

 markdown ![drawing](https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown/drawing.jpg) {:.some-css-class style="width: 200px"} 

o

 markdown ![drawing](https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown/drawing.jpg) {:.some-css-class width="200"} 

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

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

Como se cargan muchas fotos con 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 un 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ías http://i.imgur.com/12345m.jpg para una imagen de tamaño mediano.

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

 \begin{figure} \includegraphics[width=300pt, height = 125 pt]{https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown/drawing.jpg} \end{figure} 

Entonces puede usar, por ejemplo, la sentencia \begin{center} para centrar la imagen.

Hay forma de agregar clase y estilo css

![pic][logo]{.classname}

a continuación, escriba el enlace y css a continuación

 [logo]: (picurl)  

Referencia aquí

Cuando uso Flask (lo estoy usando con páginas planas) … descubrí que la habilitación explícita (no era por defecto por alguna razón) ‘attr_list’ en las extensiones dentro de la llamada a la reducción 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} 

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

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

Ejemplo de syntax:

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

Ejemplo de gatito:

gatito