Hong Cheung 
Atenção
Este método exige o uso de .mdx
Adoro escrever meus posts de blog em markdown.
No entanto, modificar imagens é um dos pontos problemáticos.
Neste artigo, vou te ensinar como redimensionar e posicionar sua imagem como você quiser usando um pouco de HTML.
Não se preocupe, vou te guiar pelo processo.
O Problema
A única forma de inserir imagens no seu post de blog em markdown é esta:
Resultado:
Sei que ela parece fofa, mas está ocupando a tela inteira! E se você quiser ela em um tamanho menor?
Redimensionar
Aqui, com um pouco de HTML, você resolve esse problema.
Em vez de usar , usamos o seguinte:<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px;" />Explicação do código:
O src é a abreviação do endereço da sua imagem da gatinha.
O alt é onde você coloca isto - ! [descrição da imagem aqui] ( Link )
O style é como você altera a apresentação da sua imagem. Aqui eu defini para mostrar uma largura máxima de 400 pixels - não importa o quê.
Resultado:
Você pode alterar o max-width para o valor que quiser.
No entanto, note que não alterei o max-height aqui. Isso porque, se você definir uma largura e uma altura fixas para uma imagem, ela pode ficar distorcida, e você não quer isso.
Então, de preferência, use max-width ou max-height para sua imagem, para mantê-la na proporção correta.
Posição
Você também pode querer colocar sua imagem no centro em vez do lado esquerdo padrão.
Você pode fazer isso adicionando ‘margin: auto;’ depois de ‘max-with: 400px;‘.
Código:
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />Resultado:
Ótimo! Agora você conhece a forma básica de alterar o tamanho das suas imagens no seu post de blog.
Agora quero te mostrar outra forma de alcançar o mesmo resultado, mas indiscutivelmente melhor.
Vamos dar uma olhada na minha forma preferida de modificar imagens em markdown.
Minha Preferência
Código:
<div style="max-width: 400px; margin: auto"> </div>Resultado:
Como você pode ver, o resultado é o mesmo de antes! Mas o código parece mais limpo. Mais importante ainda, você pode continuar usando a forma padrão de inserir sua imagem:
Depois, envolva-a com uma div (um contêiner, neste contexto, para sua imagem)
<div style="max-width: 400px; margin: auto"></div>Lembra do style=“max-width: 400px; margin: auto”, que usamos no nosso img?
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />Estamos apenas pegando a modificação de estilo e aplicando ao contêiner que envolve a imagem.
<div style="max-width: 400px; margin: auto"> </div>Assim, você obtém os benefícios dos dois! E fica bonito também!
Obrigado pela leitura, espero que ajude!
Me avise se você tiver algum problema na seção de comentários abaixo.
Boas escritas!
