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.

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)

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

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.

Solo usa:

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

en vez de:

![](Assets/icon.png)

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

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.

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

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

Si está utilizando kramdown , puede hacer esto:

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

Luego agregue esto a su CSS personalizado :

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

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.

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.

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

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

Escribí el simple analizador de etiquetas para usar una etiqueta 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 _pluginscarpeta.

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.

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 .

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>

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.

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í

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

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"

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:

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!

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.

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}

Para los usuarios de IntelliJ IDEA , consulte el complemento Markdown Navigator .

La vista previa representa imágenes, insignias, HTML, etc.

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)

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.