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 esté centrada. Estoy pidiendo Markdown general, no solo cómo lo hace GitHub.

preguntado el 03 de febrero de 13 a las 18:02

Para la imagen superior (como el logotipo del repositorio), solo hago un "relleno blanco" en la imagen original antes de exportar a PNG. -

Realmente debería corregir la respuesta aceptada en HTML, ya que la respuesta actual utiliza funciones de reducción no estándar que no funcionan en general:

30 Respuestas

Podrías usar algo de HTML en tu Markdown:

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

O vía style atributo (no soportado por GitHub)

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

O podría 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; }

contestado el 01 de mayo de 19 a las 10:05

Usando en línea style no funciona en la mayoría de los sitios web (por ejemplo, GitHub), el sitio se desinfectará. Preferir width y height en cambio, como lo menciona @kushdillip. - Ciro Santilli Путлер Капут 六四事

La solución basada en el atributo alt es muy mala y no deberías usarla, se rompe accesibilidad. - Regnareb

El alt en Markdown coloca un título, el alt en html hace algo completamente diferente (coloca texto si la figura no se puede cargar). - julián colomb

¿Sería una buena idea recomendar un porcentaje en lugar de píxeles dependientes del dispositivo? P.ej <img src="drawing.jpg" alt="drawing" width="50%"/> ? Probado en GitHub, funciona muy bien - VasiliNovikov

Esta solucion funciono para mimiro.medium.com/max/1400/1*bSLNlG7crv-p-m4LVYYk3Q.png" ancho="450" ​​altura="250"> - Jorge Santos Neil

Con ciertas implementaciones de Markdown (incluyendo Mou y Marcado 2 (solo macOS)) puede 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)

Puedes saltarte la ALTURA

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

y ancho

![](./pic/pic1s.png =x250)

Respondido 21 Oct 21, 11:10

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

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

No parece funcionar 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 al que le gusta el estándar, el HTML se mantendrá. - user766353

tampoco funciona en la wiki de Bitbucket. está mal convertido en el title atributo. - RZKY

No funciona, pero el HTML obras. - Licenciatura BK

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

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

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

Respondido el 19 de diciembre de 20 a las 14:12

¡Esto funciono muy bien para mi! El CSS en línea no funcionaba con GitHub Markdown, pero los atributos de alto/ancho de la "vieja escuela" funcionaban bien. - Niczak

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

A Github le gusta esto. - teoman shipahi

Tenga en cuenta que en los sitios de Stack Exchange debe usar este formato exacto y ningún otro atributo (tenga en cuenta incluso alt) aparentemente están permitidos (puede omitir width or height, y el espacio antes /> es opcional, pero aparte de eso, no se permiten espacios en blanco adicionales). GitHub, por el contrario, admite (al menos) también alt y title atributos y permite espacios en blanco adicionales. - mklement0

En Stack Overflow, la solución simple es vincular a una versión diferente de la imagen. Cada imagen que carga se procesa en seis versiones diferentes, que puede cambiar agregando un carácter para indicar el tamaño deseado antes del .png extensión. Para más detalles, consulte meta.stackoverflow.com/questions/253403/… - triples

Solo usa:

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

en lugar de:

![](Assets/icon.png)

respondido 06 nov., 15:12

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

Esto es compatible en github - thanos.a

Funciona en Gitlab - Gianluca Veschi

No funciona en Jupyter. - SteveWithamDuplicado

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

Respondido el 15 de diciembre de 16 a las 16:12

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

@ m0z4rt GitHub probablemente no use PanDoc para representar MarkDown. - Rudolfbyker

@rudolfbyker muchas gracias. Para Mkdocs-material funcionó con la adición -attr_list in markdown_extensions```` in mkdocs.yml```. - Lilya

Combinando dos respuestas obtuve una solución, que podría no parecer tan bonita,
¡pero funciona!

Crea una miniatura con un tamaño específico en el que se puede hacer clic para llevarte 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. descuento de ejemplo

Gracias por sus comentarios, sabemos que esto también funciona en:

  • GitLab
  • Cuaderno Jupyter

contestado el 10 de mayo de 21 a las 12:05

Excelente. Funciona con GitLab Enterprise. - sven haile

Si tengo un enlace de descuento: [myLink]: ./image.png, ¿cómo puedo aplicar esta solución para evitar duplicar src? Ejemplo: [<img src="[myLink]" width="250"/>](image.png) - Víctor Zanella

@VictorZanella Simplemente no puede hacer eso, ese es el inconveniente, pero por otro lado puede usar otra imagen como portada, ¡así que es una característica! ;) Siempre puedes usar algún motor de plantillas. Encontré uno para GitHub como una acción y creo que debería estar lo suficientemente convencido. variables-en-markdown - próximo

Muchas gracias, esta opción es por mucho la mejor para usar en notebooks jupyter - Lwi

gran respuesta gracias - spencer davis

Tal vez esto ha cambiado recientemente, pero el Documentos de Kramdown mostrar una solución sencilla.

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.

Respondido el 22 de junio de 15 a las 08:06

Puede haber funcionado en el pasado, pero ahora no funciona en Github. Añadiendo un pasado de moda la etiqueta con ancho y alto todavía funciona. - mez.pahlan

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

Atributos de bloque como se muestra aquí son una buena opción con kramdown. La sintaxis aquí es ligeramente incorrecta, por lo que @piratemurray tiene problemas. Debería ser {: height=36 width=36}; esto genera atributos HTML, por lo que no debería tener el px sufijo. Alternativamente, puede usar css con {: style="height:36px; width:36px"}. - Quantum7

Trabaja para Jekyll! gracias. Ni siquiera necesito alto y ancho, solo uno es suficiente. ![alt text](image.png){:height="36px" } - Matías

Tuve que hacer un pequeño cambio para que esto funcionara correctamente en Jekyll. Esta respuesta tal como está escrita genera HTML mal formado, como el width y height los atributos incluyen la parte "px". Para mí necesitaba usar {:height="36" width="36"} - Maximiliano Laumeister

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

Respondido 08 Oct 19, 13:10

Uno podría recurrir a la alt atributo que se puede configurar en casi todas las implementaciones/renderizaciones de Markdown junto con CSS-selectores en función de los valores de los atributos. 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;
}

Respondido 28 Oct 14, 12:10

¿No es esto lo mismo que La respuesta anterior de Tieme? - RojoGrittyLadrillo

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

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, ¿verdad? También tendrán problemas con todos aquellos que no se molestan en usar alt de la manera correcta). - Petermeissner

Si es usando kramdown, Puedes hacerlo:

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

Luego agregue esto a tu CSS personalizado:

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

Respondido 16 Oct 16, 16:10

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

Sobre la base de la respuesta de Tiemes, si está usando CSS 3 puedes 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 aún puede usar la etiqueta alt para su finalidad prevista 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 funcionado bien.

Respondido 16 Oct 16, 16:10

Funciona perfectamente en kramdown+jekyll-3.1.2 también. - C--

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

Si está utilizando estilo de referencia imágenes en Rebaja con sabor a Gihub:

Here is an image of tree: 
![alt text][tree]{height=400px width=500px}


[//]: # (Image References)
[tree]: ./images/tree.png "This is a tree"

Respondido el 19 de junio de 20 a las 09:06

Esto no funcionó para mí. La referencia vinculada no menciona nada sobre alto/ancho - Shubham Chaudhary

@ShubhamChaudhary El enlace al que se hace referencia muestra "qué es un imagen de estilo de referencia"En Rebajas con sabor a Github. Tal vez no tenga una imagen de estilo de referencia o esté usando otra variante de Markdown. - zardosht

Oh, lo vinculaste para explicar el 'estilo de referencia'. En el contexto de la respuesta, el enlace no menciona nada sobre la sintaxis de alto/ancho {height=100px width=100px} - Shubham Chaudhary

Para los interesados ​​en un rmarkdown y knitr solución. Hay algunas maneras de cambiar el tamaño de las imágenes en un .rmd archivo 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')
```

contestado el 09 de mayo de 19 a las 07:05

¿Cómo puedo cambiar tanto el alto como el ancho? Para la primera opción específicamente. Intenté poner alto y ancho en el mismo {} pero falló. Separado {}s fallar también. - NelsonGon

@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... - simbolos

Gracias, desde entonces pensé que puedo hacerlo así: {height=x width=y}. Parece que esta sintaxis no reconoce las comas, pero podría especificar otros atributos, incluidos los elementos de estilo. - NelsonGon

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>

Respondido 04 Abr '20, 19:04

<div><img src="attachment:image.png" width="500" height="300"/></div> <- una línea :D - Pila de golpes

Vine aquí buscando una respuesta. Algunas sugerencias impresionantes 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 estaba tratando de apegarme a la sintaxis de rebajas, así que intenté 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>

¡Así que de esta manera se admiten imágenes externas!

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

contestado el 19 de mayo de 17 a las 04:05

No puede poner Markdown dentro de HTML, deberá reemplazar ![chilling](link) con <img src="link" alt="chilling">. - charl kruger

Podrías usar este también con kramdown:

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

or

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 .clase.segundaclase.

Respondido 10 ago 14, 08:08

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 a la _plugins carpeta.

Respondido 16 Oct 16, 16:10

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

Como muchas fotos se suben usando el servicio imgur, puedes 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ías http://i.imgur.com/12345m.jpg para imagen de tamaño mediano.

respondido 15 nov., 16:15

Stack Overflow tiene una instalación similar; vea el comentario que dejé en otra respuesta para un enlace. stackoverflow.com/questions/14675913/… - triples

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

Acoplar

  • Adjuntar { width=50% } or { width=50% height=50% }

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

    • Importante: sin 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 no funcionar con R markdown

No funciona:

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

Respondido el 06 de diciembre de 19 a las 16:12

Si tiene una imagen en cada archivo md, una forma práctica de controlar el tamaño de la imagen es:

agregando estilo css de la siguiente manera:

## Who Invented JSON?
`Douglas Crockford`

Douglas Crockford originally specified the JSON format in the early 2000s.
![Douglas Crockford](img/Douglas_Crockford.jpg)

<style type="text/css">
    img {
        width: 250px;
    }
</style>

y el resultado será como: [![ingrese la descripción de la imagen aquí][1]][1]

Si tiene más imágenes en cada página md, la forma práctica de controlar cada imagen o cada etiqueta personalizada es definir cada elemento en css. Para este caso para la etiqueta img podríamos tener:


//in css or within style tags:
    img[alt="Result1"] {
    width: 100px;
    }

    img[alt="Result2"] {
    width: 200px;
    }
    img[alt="Result3"] {
    width: 400px;
    }

// try in md one of the methods shown below to insert image in your document:
 <br/>
<img src="https://i.stack.imgur.com/xUb54.png" alt="Result1"> <br/>
<img src="https://i.stack.imgur.com/xUb54.png" alt="Result2"> <br/>
<img src="https://i.stack.imgur.com/xUb54.png" alt="Result3"> <br/>

<br/>

in md:<br/>
![Result1](img/res-img-1.png) <br/>

![Result2](img/res-img-2.png) <br/>

![Result3](img/res-img-3.png) 
[1]: https://i.stack.imgur.com/xUb54.png

Respondido el 13 de diciembre de 21 a las 10:12

Para aquellos que usan Markdown en Google Colaboratory, no es necesario que la imagen se cargue en la carpeta de almacenamiento de la sesión o que se vincule en Google Drive. Si la imagen tiene una URL, y se puede incluir en el cuaderno de Jupyter, y su tamaño cambió de la siguiente manera:

<img src="https://image.png" width="500" height="500" />

enter image description here

Respondido el 07 de junio de 21 a las 18:06

Para R-Markdown, ninguna de las soluciones anteriores funcionó para mí, por lo que recurrí a regular Látex sintaxis, que funciona bien.

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

Entonces puedes usar, por ejemplo, el \begin{center} declaración para centrar la imagen.

Respondido 16 Oct 16, 16:10

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

Cuando usas Frasco (Lo estoy usando con páginas planas)... Descubrí que habilitar explícitamente (no era 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}

Respondido 16 Oct 16, 16:10

Hay forma de 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í

contestado el 23 de mayo de 17 a las 12:05

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

Estoy usando jupyter_core-4.4.0 & libreta jupyter.

Si está adjuntando sus imágenes insertándolas en el descuento 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)

Estas attachment campo de golf no trabajo:

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

HACER ESTO. Esto trabajo.

Simplemente agregue corchetes div.

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

¡Espero que esto ayude!

Respondido 06 ago 19, 22:08

¡LA MEJOR RESPUESTA! - iluminado

Para futura referencia:

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

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

Esta característica fue solicitada aquí y como prometido by Laurent esto ha sido implementado.


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

Respondido 14 ago 19, 10:08

La pura dicho anteriormente, funcionó en mi Github Léame.md documento.

Sin embargo, mi verdadero problema era que la imagen estaba dentro de una celda de tabla, simplemente comprimiendo el texto en la celda al lado. Entonces, la otra forma era establecer el ancho de las columnas en las tablas de Markdown, pero las soluciones realmente no parecían suficientes rebajado para mi mañana.

Por fin resolví ambos problemas simplemente forzando la celda de texto al lado con tanto "&nbsp;" como necesitaba

Espero que esto ayude. Adiós y gracias a todos.

Respondido 20 Feb 21, 13:02

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

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

Ejemplo de sintaxis:

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

Ejemplo de gatito:

gatito

Respondido 08 Feb 18, 14:02

Es una pena que no funcione en GitHub en este momento, pero sugiero enviar una solicitud de función de todos modos. - ddri

A través de MD simple compatible con versiones anteriores:

![<alt>](<imguri>#<w>x<h> "<title>")

donde w, h define el cuadro delimitador en el que encaja el aspecto, como, por ejemplo, en el paquete Flutter https://pub.dev/packages/flutter_markdown

Código: https://github.com/flutter/packages/blob/9e8f5227ac14026c419f481ed1dfcb7b53961475/packages/flutter_markdown/lib/src/builder.dart#L473

Reconsidere las soluciones html que rompen la compatibilidad, ya que las personas pueden usar aplicaciones/componentes nativos/no html para mostrar el descuento.

Respondido 28 Jul 21, 10:07

Si cambiar la rebaja inicial no es una opción para ti, 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 por correo electrónico (ya que Outlook ignora cualquier estilo css de imagen)

Respondido 07 Feb 19, 14:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.