Hong Cheung 
Atención
Este método requiere usar .mdx
Me encanta escribir mis entradas de blog en Markdown.
Sin embargo, modificar las imágenes es uno de los puntos problemáticos.
En este artículo te voy a enseñar cómo cambiar el tamaño y la posición de tus imágenes a tu gusto usando un poco de HTML.
No te preocupes, te guiaré paso a paso.
El problema
La única forma de insertar imágenes en tu entrada de blog en Markdown es esta:
Resultado:
Sé que se ve adorable, ¡pero está ocupando toda la pantalla! ¿Y si la quieres en un tamaño más pequeño?
Cambiar el tamaño
Aquí, con un poco de HTML puedes resolver ese problema.
En lugar de usar , usamos lo siguiente:<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px;" />Explicación del código:
El src es la abreviatura de la fuente de esa imagen del gatito.
El alt es donde pones esto: ! [descripción de la imagen aquí] ( Enlace )
El style es cómo cambias la presentación de tu imagen. Aquí lo configuré para mostrar un ancho máximo de 400 píxeles, sin importar qué.
Resultado:
Puedes cambiar el max-width a lo que quieras.
Sin embargo, fíjate que no cambié el max-height aquí. Es porque si estableces un ancho y una altura definidos para una imagen, podría deformarse, y no quieres eso.
Así que preferiblemente usa max-width o max-height para tu imagen y mantenerla con la proporción correcta.
Posición
También podrías querer poner tu imagen en el centro en lugar del lado inicial predeterminado.
Puedes hacerlo añadiendo ‘margin: auto;’ después 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:
¡Genial! Ahora ya conoces la forma básica de cambiar el tamaño de tus imágenes en tu entrada de blog.
Ahora quiero mostrarte otra forma de lograr el mismo resultado, pero posiblemente mejor.
Echemos un vistazo a mi forma preferida de modificar imágenes en Markdown.
Mi preferencia
Código:
<div style="max-width: 400px; margin: auto"> </div>Resultado:
Como puedes ver, ¡el resultado es el mismo que el anterior! Pero el código parece más limpio. Y lo más importante, aún puedes usar la forma predeterminada de insertar tu imagen:
Luego, envuélvela con un div (un contenedor, en este contexto para tu imagen)
<div style="max-width: 400px; margin: auto"></div>¿Recuerdas el style=“max-width: 400px; margin: auto”, que usamos en nuestro img?
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />Simplemente estamos tomando la modificación de style y aplicándola al contenedor que contiene la imagen.
<div style="max-width: 400px; margin: auto"> </div>¡Así que obtienes lo mejor de ambos! ¡Y también se ve ordenado!
Gracias por leer, ¡espero que te sirva!
Déjame saber si tienes algún problema en la sección de comentarios de abajo.
¡Feliz escritura!
