Alterando o tamanho da imagem no Markdown

920

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.

cantdutchthis
fonte
11
Sugiro alterar a resposta aceita para o código que seja compatível com a maioria dos intérpretes de descontos (este, na minha opinião, stackoverflow.com/a/21972032/463225 ).
WattsInABox
Possível duplicada da imagem
iNet
A Microsoft tem uma observação em sua página para a sintaxe do Markdown:! A sintaxe para dar suporte ao redimensionamento de imagem é suportada apenas em solicitações pull e no Wiki. docs.microsoft.com/en-us/vsts/project/wiki/… Não tenho certeza se este comentário de sintaxe é válido para todas as remarcações ou apenas para o VSTS.
Joe B

Respostas:

501

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)
prosseek
fonte
22
Observe também que você não pode ter um espaço após o '='. bom: "! [] (./pic / pic1s.png = 250x)", ruim: "! [] (./pic / pic1s.png = 250x)"
cantdutchthis
17
Não está no padrão, portanto, ele não funciona com todos os analisadores Markdown
Marius Soutier
19
Parece não funcionar com Redcarpet, que eu uso com Jekyll, então eu usaria HTML, como o @Tieme respondeu. Se você acabar executando o seu Markdown por meio de um analisador que gosta do padrão, o HTML será exibido.
user766353
7
também não funciona no wiki do Bitbucket. é convertido incorretamente no titleatributo
RZKY
6
Não funciona, mas o HTML <img src = http // ... width = "..." height = "..."> funciona.
BK Batchelor
980

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; }
Me amarre
fonte
42
O uso do inline stylenão funciona na maioria dos sites (por exemplo, GitHub), pois é higienizado. Prefira widthe, heightcomo mencionado por @kushdillip.
Ciro Santilli publicou
2
A solução baseada no atributo alt é muito ruim e você não deve usá-la, pois quebra a acessibilidade .
Regnareb 17/10/16
O alt no markdown coloca uma legenda, o alt em html faz algo completamente diferente (coloque texto se a figura não puder ser carregada).
Julien Colomb
Funciona no Github com atributo de largura.
Shital Shah 22/05/19
Eu estava colocando uma imagem em uma tabela e funcionou melhor usar max-widthem vez de garantir as imagens não são squished
kashiraja
325

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.

kushdilip
fonte
11
Isso funcionou muito bem para mim! CSS embutido não estava funcionando com o GitHub Markdown, mas os atributos de altura / largura da "velha escola" funcionaram perfeitamente.
Nicholas Kreidberg
O bom é que este também funcionará se você estiver tentando usar um visualizador de descontos para arquivos locais em uma extensão / complemento do navegador.
code_dredd
1
Github gosta disto.
Teoman shipahi
1
você é demais! agora funciona para mim
Wesin Alves 23/02
Isso é ótimo, exceto não nos meus notebooks ipython no github.
eric
129

Apenas use:

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

ao invés de:

![](Assets/icon.png)
Bartłomiej Semańczyk
fonte
1
A maioria das implementações do Markdown possui uma sintaxe modificada para que você não precise inserir a tag HTML bruta, mas é a coisa certa a fazer se a implementação que você está usando não tiver uma.
Nick McCurdy
1
maldito gênio! trabalha para GitHub =)))
Victor R. Oliveira
Isso é compatível no github
thanos.a
Obrigado por torná-lo simples e a mudança óbvia.
Marcy
67

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

rudolfbyker
fonte
1
É ainda melhor do que especificar o tamanho diretamente em pontos. Fico feliz que esta seja a abordagem que Pandoc escolheu!
Jciloa
2
@ m0z4rt O GitHub provavelmente não usa o PanDoc para renderizar o MarkDown.
Rudolfbyker
63

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.

sayth
fonte
7
Pode ter funcionado no passado, mas não funciona agora no Github. Adicionar uma tag <img> antiga com largura e altura ainda funciona.
piratemurray
2
Esta é a melhor solução se você estiver usando o Kramdown ou o Jekyll (que usa o Kramdown por padrão).
Nick McCurdy
2
Os atributos de bloco, como mostrado aqui, são uma boa opção com o kramdown. A sintaxe aqui está um pouco errada, e pode ser por isso que @piratemurray está tendo problemas. Deveria ser {: height=36 width=36}; isso gera atributos HTML, portanto, não deve ter o pxsufixo. Como alternativa, você pode usar css com {: style="height:36px; width:36px"}.
precisa saber é o seguinte
Trabalhos para jekyll! valeu. Eu nem preciso de altura e largura, apenas uma é suficiente. ![alt text](image.png){:height="36px" }
Matthias
1
Eu tive que fazer uma pequena alteração para que isso funcionasse corretamente em Jekyll. Esta resposta, como escrita, gera HTML malformado, pois os atributos widthe heightincluem a parte "px". Para mim eu precisava usar{:height="36" width="36"}
Maximillian Laumeister
23

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;
}
petermeissner
fonte
Não é o mesmo que a resposta anterior de Tieme ?
RedGrittyBrick
13
Este é um uso indevido do atributo alt e prejudica a acessibilidade.
sbuck
2
Sim, é um hack, mas ainda parece ser a única coisa que funciona nos sabores do Markdown. +1 por apontar isso (as pessoas que usam leitores de tela têm problemas com isso, certo? Eles também terão problemas com todos aqueles que não se preocupam em usar alt da maneira certa).
Petermeissner
20

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

prabhu
fonte
17

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;
}
Steven Penny
fonte
3
Eu recomendaria não definir a largura apenas em CSS. É útil informar ao navegador qual o tamanho do elemento da imagem antes do carregamento da imagem e da folha de estilo para otimizar o layout dos elementos ao redor da imagem sem fazer refluxo.
Nick McCurdy
13

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.

bennetimo
fonte
1
Funciona perfeitamente no kramdown + jekyll-3.1.2 também.
Subin Sebastian 27/02
Se você não precisar renderizar a imagem em largura total, é melhor colocar o tamanho do pixel diretamente na tag (não no CSS).
Nick McCurdy
13

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. Exemplo de remarcação

proximab
fonte
1
Excelente. Funciona com o GitLab Enterprise.
Sven Haile
10

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

Umang Desai
fonte
1
Você não pode colocar remarcações dentro do HTML, precisará substituir ![chilling](link)por <img src="link" alt="chilling">.
Charl Kruger
10

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')
```
symbolrush
fonte
2
Como posso alterar a altura e a largura? Para a primeira opção especificamente. Eu tentei colocar altura e largura da mesma forma, {}mas falhei. {}S separados também falham.
precisa saber é o seguinte
2
@ NelsonGon: eu nunca precisei especificar os dois, já que a altura também é escalável, quando a largura é especificada. Portanto, não sei se isso seria possível e como alcançá-lo. Porém, boa pergunta ..
symbolrush
2
Obrigado, eu desde que percebi que eu posso fazê-lo assim: {height=x width=y}. Parece que esta sintaxe não reconhece vírgulas, mas eu poderia especificar outros atributos, incluindo elementos de estilo.
NelsonGon
9

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.

Iulian Onofrei
fonte
7

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 .

rriemann
fonte
5

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>
Alfredo Castaneda
fonte
Isso é HTML, não Markdown ...
MappaM
4

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.

Knarpie
fonte
1
+1, mas melhor logo \centeringapós \begin{figure}ou nada, se você usar `\ includegraphics [width = \ linewidth] {drawing.jpg}` que eu acho que deve ser a saída pandoc padrão pelo menos quando a imagem for mais larga que o texto.
Fran
4

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

Cropse
fonte
4

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 =WIDTH![foo](foo.png =250x)funciona
dissidentes
fonte
4

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"

zardosht
fonte
3

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:

gatinho

ddri
fonte
Uma pena que ele não funcione no GitHub no momento, mas eu sugiro que você solicite o recurso.
DDRI
3

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!

MrFun
fonte
3

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.

smkj33
fonte
2

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}
esteira
fonte
1

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)

Yannickv
fonte
1

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.

Stewart
fonte