Para adicionar imagens no Markdown:
A sintaxe é fornecida abaixo.
Para modificar o tamanho da imagem no Markdown:
Para modificar o tamanho da imagem no Markdown, utilizamos a tag “ ” do HTML. Somente esta tag ajuda na modificação do tamanho da imagem no Markdown e a sintaxe desta tag “
” é dada abaixo.
< imagem src = 'nome da imagem' tudo = “” largura = 'valor' altura = 'valor' >
Podemos alterar o tamanho da imagem definindo os valores de largura e altura em números e também em porcentagens. Também podemos usar o atributo style nesta tag “ ” para modificar o tamanho da imagem no Markdown.
Exemplo # 01:
Usamos o Visual Studio Code para executar os códigos Markdown. Para os códigos Markdown, temos que abrir tanto o editor de texto quanto a janela de visualização. No editor de texto, temos que adicionar a entrada e a saída é obtida na janela de visualização. No editor de texto, primeiro adicionamos a imagem no Markdown colocando o “!” símbolo e, em seguida, adicione colchetes nos quais adicionamos “texto alternativo”. Agora, estamos adicionando o caminho da imagem.
Inserimos o nome da imagem com sua extensão porque tanto o código quanto a imagem são salvos no mesmo diretório. Então, nós apenas adicionamos o nome aqui que é “cloud.png”. Em seguida, adicionamos o texto que é “Cloud Image” e este é o texto que aparece apenas quando o mouse passa. Agora, a imagem é adicionada e também podemos ver essa imagem na janela de visualização.
A imagem da nuvem é mostrada abaixo, pois adicionamos essa imagem no código Markdown exibido acima.
Exemplo # 02:
Agora, estamos modificando o tamanho desta imagem usando a tag “ ”. Primeiro, inserimos o “src” no qual o nome ou caminho da imagem é adicionado. Depois disso, colocamos “alt” e ajustamos “Cloud Image”. Ajustamos a “largura” da imagem para “230”. A “altura” é ajustada para “300”. Também adicionamos o “título” nesta tag “
” e o valor deste “título” é “Título da nuvem”. Agora, o tamanho da imagem é modificado. Você pode ver o tamanho modificado da imagem na janela de visualização.
O tamanho da imagem neste resultado é modificado e a “largura” da imagem é “230” e a “altura” é “300”. Isso ocorre porque ajustamos essa largura e altura no código Markdown.
Exemplo # 03:
Também podemos modificar a “largura” e a “altura” da imagem colocando seus valores em porcentagens. Depois de adicionar o nome ou caminho da imagem e ajustar o “alt” para “Cloud Image”, definimos a “width” e a “height” da imagem para “50%”. Em seguida, adicione o “título” e feche esta tag.
Aqui está a imagem cujo tamanho é modificado usando a tag “ ”. A altura da imagem, assim como a largura, são “50%”.
Exemplo # 04:
Agora, estamos utilizando o atributo “style” nesta tag “ ” para modificar o tamanho da imagem no Markdown. Devemos adicionar o nome da imagem e depois o atributo “alt”. Após isso, colocamos o atributo “style” e adicionamos “width and height” como seus valores. A “largura” que definimos está em pixels que é “500px” e a “altura” é “400px”. Agora, o tamanho da imagem será ajustado de acordo.
O tamanho da imagem neste resultado foi atualizado; sua “largura” agora é “500px” e sua “altura” é “400px”. Isso é visível como resultado do código Markdown fornecido acima, onde ajustamos a largura e a altura no atributo style.
Exemplo # 05:
Estamos adicionando outra imagem. Mas neste código Markdown, não alteramos o tamanho da imagem. O tamanho da imagem é alterado somente quando utilizamos a tag “ ”. Colocamos o “!” e, em seguida, adicione o texto dentro dos colchetes que é 'Imagem do Sol'. Após fechar os colchetes, colocamos os parênteses nos quais inserimos o nome da imagem “New_sun.png” e adicionamos o texto que será exibido ao passar o mouse. O tamanho original da imagem será exibido no resultado.
A imagem do sol é mostrada conforme adicionamos esta imagem no código Markdown. Além disso, o tamanho original da imagem é visível porque não podemos ajustar o tamanho da imagem sem usar a tag “ ”.
Exemplo # 06:
Ao empregar a tag “ ”, agora estamos alterando o tamanho desta imagem. Primeiro, adicionamos o nome ou caminho da imagem cujo tamanho queremos modificar ao campo “src”. A 'largura' e a 'altura' da imagem foram alteradas para '300'. O tamanho da imagem agora mudou. A janela de visualização mostra o novo tamanho da imagem.
A largura e a altura da imagem foram modificadas para “300”.
Exemplo # 07:
Ao definir os valores de 'largura' e 'altura' da imagem em porcentagens, podemos alterar facilmente essas dimensões. Ambos ajustamos a “largura” e a “altura” da imagem para “40%” e fechamos essa tag.
Aqui está a imagem com 40% de altura e também 40% de largura. Adicionamos essa largura e altura dentro da tag “ ” após adicionar o nome da imagem.
Exemplo # 08:
Agora, estamos usando o atributo “style” na tag “ ” para alterar o tamanho da imagem no Markdown. Adicionamos “width and height” como valores ao atributo “style” após adicionar o nome da imagem e o atributo “alt”. A “largura” que especificamos é “450px”, enquanto a “altura” também é ajustada para “450px”. O tamanho da imagem agora mudará adequadamente de acordo com esses novos valores de largura e altura.
Agora, o resultado desse código também é mostrado na janela de visualização exibida abaixo. Tanto a largura quanto a altura desta imagem agora são “450px” neste resultado abaixo.
Conclusão:
Exploramos o conceito de adicionar imagens em detalhes neste guia e também exploramos como modificar o tamanho da imagem no Markdown. Adicionamos as imagens no Markdown e modificamos seu tamanho com a ajuda da tag “ ” e mostramos como fazer tudo isso no Markdown. Alteramos o tamanho da imagem colocando os valores de largura e altura tanto em números quanto em porcentagens. Também utilizamos o atributo style na tag “
” para atualizar ou modificar o tamanho da imagem no Markdown.