Redimensionar imagem no wiki do GitHub usando Markdown


255

Estou escrevendo uma página wiki no GitHub e usando o Markdown.

Meu problema é que estou colocando uma imagem grande (esta imagem está em seu próprio repositório) e preciso redimensioná-la.

Eu tentei soluções diferentes, mas elas não funcionam:

![image](http://url.to/image.png "Title" {width=40px height=400px})

![image](http://url.to/image.png = 250x250)

![image](http://url.to/image.png = 250x)

[[http://url.to/image.png = 250x]]

Existe uma maneira de obtê-lo?

É preferível sem HTML.


Respostas:


373

Atualizada:

Código (externo / interno):

![test](https://github.com/favicon.ico)

Código (interno / externo para dimensionamento ):

<img src="https://github.com/favicon.ico" width="48">

Exemplo:

teste


Resposta antiga:

Isso deve funcionar:

[[ http://url.to/image.png | altura = 100 px]]

Fonte: https://guides.github.com/features/mastering-markdown/


Obrigado. <img src="..." width="48">trabalha no READMEs para imagens carregadas no GitHub.
Sam Dutton

@ SamDutton: Parece funcionar bem também para imagens hospedadas em outros lugares.
Jonik 21/09/2015

1
Teste hoje. O Github não reconhece a sintaxe de [] (.. = 400) ou [] (... = 400px); portanto, se eu precisar redimensionar a imagem, tenho que usar a sintaxe <img />.
Spikeyang

1
A resposta riscada funciona se a imagem for adicionada ao próprio wiki.
Eduardo

2
O que @Eduardo disse ... A 'Resposta antiga' que você riscou é o que eu tenho procurado na Internet - ainda funciona muito bem para caminhos relativos (ativos dentro do wiki). Além disso, eu tive que adicionar uma ou duas imagens dentro de uma tabela. O caractere de pipe estava me deixando triste por causa da formatação típica da tabela na margem de lucro. Escapando o tubo dentro de uma célula da tabela ainda é válido: [[ http://url.to/img.png \| height=48px]].
11118 DanMad

57

No GitHub, você pode usar HTML diretamente em vez de Markdown:

<a href="url"><img src="http://url.to/image.png" align="left" height="48" width="48" ></a>

Isso deve fazer isso.


10
Obrigado pela solução, é possível sem código html?
fhuertas

1
Só quero observar que você pode excluir o arquivo widthpara que ele possa dimensionar a largura com base na altura automaticamente.
Eu sou um dragão sapo

2
Não apenas no Github; Acredito HTML em linha é permitida dentro Markdown em geral ...
Nicolas Miari

os br e hr não ajudam.
precisa saber é o seguinte

2

Quase 5 anos depois, apenas a formatação HTML direta funciona para imagens no GitHub e outras opções de descontos ainda impedem o carregamento de imagens ao especificar alguns tamanhos personalizados, mesmo com as dimensões incorretas. Prefiro especificar a largura desejada e obter a altura calculada automaticamente, por exemplo,

<img src="https://github.com/your_image.png" alt="Your image title" width="250"/>


2

Eu usei os métodos descritos acima. Agora estou usando o método que é uma maneira semelhante, mas mais simples para mim.

  1. Primeiro, crie o arquivo README.md adicionado ao seu projeto.
  2. Em seguida, faça o upload de capturas de tela ou quaisquer imagens de descrição necessárias para o diretório principal do projeto.
  3. Após fazer o upload da imagem, os ativos usam html para se referir diretamente a esses ativos, sem usar o link abaixo

Como isso:

<img src="icon.jpg" width="324" height="324">

<p align="center">
  <img src="screen1.png" width="256" height="455">
  <img src="screen2.png" width="256" height="455">
  <img src="screen3.png" width="256" height="455">
</p>

No exemplo acima, usei o parágrafo para alinhar as imagens lado a lado. Se você usar uma imagem única, use o código abaixo

<img src="icon.jpg" width="324" height="324">

Tenha um bom dia!


0

As páginas do GitHub agora usam o kramdown como seu mecanismo de remarcação para que você possa usar a seguinte sintaxe:

Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}.

http://kramdown.gettalong.org/syntax.html#images

Ainda não testei no wiki do GitHub.


1
@nicobo eu tentei parece que não funciona para imagem externa?
user310291

Isso funciona em páginas GitHib usando Jekyll, FYI (Sei que isso não é precisamente a questão PO)
DavidJ

0

Isso aborda a questão diferente, como obter imagens na marcação gist (em oposição ao github) em primeiro lugar?


Em dezembro de 2015, parece que apenas links para arquivos funcionam github.comou não cloud.githubusercontent.com. Etapas que funcionaram para mim em essência:

  1. Faça uma essência, digamos Mygist.md(e, opcionalmente, mais arquivos)
  2. Vá para a caixa "Escrever comentário" no final
  3. Clique em "Anexar arquivos ... selecionando-os"; selecione seu arquivo de imagem local
  4. O GitHub reproduz uma cadeia longa e longa onde coloca a imagem, por exemplo! [Khan-lasso-squared] ( https://cloud.githubusercontent.com/assets/1280390/12011119/596fdca4-acc2-11e5-84d0-4878164e04bb.png )
  5. Cole e cole manualmente no seu Mygist.md.

Mas: as pessoas do GitHub podem mudar esse comportamento amanhã, sem documentá-lo.


7
Onde está o aspecto de redimensionamento?
koppor
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.