Acabei de começar o Markdown. Adoro, mas há uma coisa que me incomoda: como posso alterar o tamanho de uma imagem usando o Markdown?

A documentação fornece apenas a seguinte sugestão para uma imagem:

![drawing](drawing.jpg)

Se possível, eu gostaria que a imagem também estivesse centralizada. Estou pedindo Markdown geral, não apenas como o GitHub faz isso.

Com certas implementações do Markdown (incluindo Mou e Marked 2 (apenas macOS)), você pode anexar =WIDTHxHEIGHTapós o URL do arquivo gráfico para redimensionar a imagem. Não esqueça o espaço antes da =.

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

Você pode pular a ALTURA

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

Você pode apenas usar um pouco de HTML no seu Markdown:

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

Ou via styleatributo ( não suportado pelo GitHub )

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

Ou você pode usar um arquivo CSS personalizado, conforme descrito nesta resposta em Markdown e alinhamento de imagem

![drawing](drawing.jpg)

CSS em outro arquivo:

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

A resposta aceita aqui não está funcionando com nenhum editor Markdown disponível nos aplicativos que eu usei até a data, como Ghost, Stackedit.io ou mesmo no editor Stack Overflow. Encontrei uma solução alternativa aqui no rastreador de problemas do StackEdit.io .

A solução é usar diretamente a sintaxe HTML e funciona perfeitamente:

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

Eu espero que isso ajude.

Apenas use:

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

ao invés de:

![](Assets/icon.png)

Se você estiver escrevendo o MarkDown for PanDoc, poderá fazer o seguinte:

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

Isso adiciona style="width: 50%;"à <img>tag HTML ou [width=0.5\textwidth]ao \includegraphicsLaTeX.

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

Talvez isso tenha mudado recentemente, mas os documentos do Kramdown mostram uma solução simples.

Dos 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 no github com Jekyll e Kramdown.

Pode-se recorrer ao altatributo que pode ser definido em quase todas as implementações / renderizações do Markdown junto com seletores de CSS com base nos valores dos atributos. A vantagem é que é possível definir facilmente um conjunto inteiro de diferentes tamanhos de imagem (e outros atributos).

Remarcação:

![minipic](mypic.jpg)

CSS:

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

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

Se você estiver usando o kramdown , poderá fazer o seguinte:

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

Em seguida, adicione isso ao seu CSS personalizado :

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

Com base na resposta do Tiemes, se você estiver usando CSS 3, poderá usar um seletor de substring :

Esse seletor corresponderá a qualquer imagem com uma tag alt que termine com '-fullwidth':

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

Em seguida, você ainda pode usar a tag alt para a finalidade pretendida para descrever a imagem.

O Markdown acima pode ser algo como:

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

Eu tenho usado isso na remarcação do Ghost, e tem funcionado bem.

Combinando duas respostas, saí com uma solução, que pode não parecer tão bonita,
mas funciona!

Ele cria uma miniatura com um tamanho específico que pode ser clicado para levá-lo à imagem de resoluções máximas.

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

Aqui está um exemplo! Eu testei no Visual Code e no Github.

Eu vim aqui procurando uma resposta. Algumas sugestões impressionantes aqui. E as informações de ouro indicando que a remarcação suporta HTMl completamente!

Uma boa solução limpa é sempre usar a sintaxe html pura, com certeza. Com a etiqueta.

Mas eu ainda estava tentando manter a sintaxe da remarcação, então tentei envolvê-la em uma tag e adicionei os atributos que eu queria para a imagem dentro da tag div. E FUNCIONA !!

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

Portanto, desta forma, imagens externas são suportadas!

Apenas pensei em colocar isso lá fora, pois não está em nenhuma das respostas. :)

Para aqueles interessados ​​em uma solução rmarkdowne knitr. Existem algumas maneiras de redimensionar imagens em um .rmdarquivo sem o uso dehtml :

Você pode simplesmente especificar uma largura para uma imagem adicionando {width=123px}. Não introduza espaço em branco entre os colchetes:

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

Outra opção é usar knitr::include_graphics:

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

Script o analisador de tags simples para usar uma tag img de tamanho personalizado no Jekyll .

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

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

Você pode adicionar o arquivo à _pluginspasta

Sei que essa resposta é um pouco específica, mas pode ajudar outras pessoas necessitadas.

Como muitas fotos são carregadas usando o serviço Imgur , você pode usar a API detalhada aqui para alterar o tamanho da foto.

Ao fazer upload de uma foto em um comentário de problema do GitHub, ela será adicionada através do Imgur; portanto, isso ajudará muito se a foto for muito grande.

Basicamente, em vez de http://i.imgur.com/12345.jpg , você colocaria http://i.imgur.com/12345m.jpg para imagens de tamanho médio.

Você também pode usar este com o kramdown:

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

ou

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

Dessa forma, você pode adicionar diretamente atributos arbitrários ao último elemento html. Para adicionar classes, existe um atalho .class.secondclass .

Este funciona para mim, não está em uma linha, mas espero que funcione para você.

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

Para o R-Markdown, nenhuma das soluções acima funcionou para mim, então mudei para a sintaxe normal do LaTeX , que funciona muito bem.

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

Então você pode usar, por exemplo, a \begin{center}declaração para centralizar a imagem.

Existe maneira com adicionar classe e estilo css

![pic][logo]{.classname}

então escreva link e css abaixo

[logo]: (picurl)

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

Referência aqui

Para todos que procuram soluções que funcionem com descontos R / descontos , estas das soluções anteriores não funcionam ou precisam de uma leve adaptação:

Trabalhando

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

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

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

  • Importante: sem vírgula entre largura e altura - ou seja { width=50%, height=30% } , não funcionará !

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

  • ![foo](foo.png){ height="36px" width="36px" }
  • Nota: {:height="36px" width="36px"} com dois pontos, a partir de @sayth, parece não funcionar com a marcação R

Não está funcionando:

• Acrescentar =WIDTHxHEIGHT
  • após o URL do arquivo gráfico para redimensionar a imagem (a partir de @prosseek)
  • nem =WIDTHxHEIGHT ![foo](foo.png =100x20)nem =WIDTHsó ![foo](foo.png =250x)funciona

Se você estiver usando imagens de estilo de referência do Github :

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


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

A adição de dimensões relativas ao URL de origem será renderizada na maioria dos renderizadores Markdown.

Implementamos isso no Corilla, pois acho que o padrão segue as expectativas dos fluxos de trabalho existentes sem forçar o usuário a confiar no HTML básico. Se sua ferramenta favorita não seguir um padrão semelhante, vale a pena fazer uma solicitação de recurso.

Exemplo de sintaxe:

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

Exemplo de gatinho:

Redimensionando anexos de imagem Markdown no Jupyter Notebook

Estou usando o jupyter_core-4.4.0& jupyter notebook.

Se você estiver anexando suas imagens, insira-as na marcação da seguinte maneira:

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

Esses attachmentlinks não funcionam:

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

FAÇA ISTO . Isso faz o trabalho.

Basta adicionar colchetes div.

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

Espero que isto ajude!

Para referência futura:

A implementação de Markdown para Joplin permite controlar o tamanho das imagens importadas da seguinte maneira:

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

Esse recurso foi solicitado aqui e, como prometido por Laurent, isso foi implementado.

Demorei um pouco para descobrir a resposta específica de Joplin.

Ao usar o Flask (estou usando páginas planas) ... descobri que ativar explicitamente (por padrão, por algum motivo) 'attr_list' em extensões dentro da chamada de redução faz o truque - e então é possível usar os atributos (muito útil também para acessar CSS - class = "minha classe", por exemplo ...).

FLATPAGES_HTML_RENDERER = prerender_jinja

e a função:

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

E então no Markdown:

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

Para usuários do IntelliJ IDEA , consulte o Markdown Navigator plugin .

A visualização renderiza imagens, emblemas, HTML etc.

Se alterar a remarcação inicial não for uma opção para você, esse hack poderá funcionar:

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

Usei isso para redimensionar imagens antes de enviá-las por email (como o Outlook ignora qualquer estilo de CSS em imagem)

A resposta do Tieme é melhor para a maioria dos casos.

No meu caso, estou usando o pandoc para converter descontos em látex. As tags HTML não funcionarão aqui.

Minha solução é reimplementar \includegraphics

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

É análogo ao uso de CSS após uma conversão para HTML.