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


528
2018-02-03 18:42


origen


Respuestas:


Con ciertas implementaciones de Markdown (incluyendo Mou y Marcado 2 (solo macOS)) puedes agregar =WIDTHxHEIGHT después de la URL del archivo gráfico para cambiar el tamaño de la imagen. No olvide el espacio antes del =.

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

Puede saltear la ALTURA

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

295
2018-01-20 19:33



Puedes usar algo de HTML en tu Markdown:

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

O vía style atributo (no soportado por 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 imagen

![drawing](drawing.jpg)

CSS en otro archivo:

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

534
2018-02-07 09:26



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.


213
2018-02-23 17:52



Solo usa:

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

en lugar de:

![](Assets/icon.png)

80
2017-11-06 12:18



Tal vez esto ha cambiado recientemente, pero el Documentos de Kramdown muestra 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.


37
2018-06-22 07:05



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

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

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

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


30
2017-12-15 16:40



Uno podría recurrir a la alt atributo que se puede configurar en casi todas las implementaciones de Markdown / renderes junto con selectores de CSS basado en valores de 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;
}

18
2017-10-28 12:36



Si usted es usando kramdown, Puedes hacerlo:

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

Luego agrega esto a su CSS personalizado:

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

12
2018-02-04 08:51



Aprovechando la respuesta de Tiemes, si estás usando CSS 3 puedes usar un selector de subcadena:

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

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

Entonces todavía puedes usar la etiqueta alt para su finalidad prevista 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.


9
2017-12-31 16:32



Escribí el analizador de etiquetas simple 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 al _plugins carpeta.


7
2017-09-07 23:16