Para agregar imágenes en Markdown:
La sintaxis se da a continuación.
Para modificar el tamaño de la imagen en Markdown:
Para modificar el tamaño de la imagen en Markdown, utilizamos la etiqueta “ ” del HTML. Solo esta etiqueta ayuda a modificar el tamaño de la imagen en Markdown y la sintaxis de esta etiqueta '
' se proporciona a continuación.
< imagen origen = 'Nombre de la imágen' todo = “” ancho = 'valor' altura = 'valor' >
Podemos cambiar el tamaño de la imagen configurando los valores de ancho y alto tanto en números como en porcentajes. También podemos usar el atributo de estilo en esta etiqueta “ ” para modificar el tamaño de la imagen en Markdown.
Ejemplo # 01:
Usamos Visual Studio Code para realizar los códigos Markdown. Para los códigos Markdown, tenemos que abrir tanto el editor de texto como la ventana de vista previa. En el editor de texto, tenemos que agregar la entrada y la salida se obtiene en la ventana de vista previa. En el editor de texto, primero agregamos la imagen en Markdown colocando el “!” símbolo y luego agregamos corchetes en los que agregamos 'Texto alternativo'. Ahora, estamos agregando la ruta de la imagen.
Introducimos el nombre de la imagen con su extensión porque tanto el código como la imagen se guardan en el mismo directorio. Entonces, solo agregamos el nombre aquí, que es 'cloud.png'. Luego, agregamos el texto que es 'Imagen de la nube' y este es el texto que se muestra solo cuando se pasa el mouse. Ahora, la imagen se agrega y también podemos ver esta imagen en la ventana de vista previa.
La imagen de la nube se muestra a continuación, ya que hemos agregado esta imagen en el código Markdown que se muestra arriba.
Ejemplo # 02:
Ahora, estamos modificando el tamaño de esta imagen usando la etiqueta “ ”. Primero ingresamos el “src” en el que se agrega el nombre o ruta de la imagen. Luego de esto, colocamos “alt” y ajustamos “Cloud Image”. Ajustamos el “ancho” de la imagen a “230”. La “altura” se ajusta a “300”. También agregamos el 'título' en esta etiqueta '
' y el valor de este 'título' es 'Título de la nube'. Ahora, se modifica el tamaño de la imagen. Puede ver el tamaño modificado de la imagen en la ventana de vista previa.
El tamaño de la imagen en este resultado se modifica y el “ancho” de la imagen es “230” y el “alto” es “300”. Esto se debe a que hemos ajustado este ancho y alto en el código Markdown.
Ejemplo # 03:
También podemos modificar el “ancho” y el “alto” de la imagen poniendo sus valores en porcentajes. Después de agregar el nombre o la ruta de la imagen y ajustar el 'alt' a 'Imagen de la nube', hemos establecido el 'ancho' y la 'altura' de la imagen en '50%'. Luego, agregue el 'título' y cierre esta etiqueta.
Aquí está la imagen cuyo tamaño se modifica usando la etiqueta “ ”. La altura de la imagen, así como el ancho, son '50%'.
Ejemplo # 04:
Ahora, estamos utilizando el atributo 'estilo' en esta etiqueta ' ' para modificar el tamaño de la imagen en Markdown. Debemos agregar el nombre de la imagen y luego el atributo “alt”. Después de esto, colocamos el atributo 'estilo' y agregamos 'ancho y alto' como sus valores. El 'ancho' que configuramos está en píxeles, que es '500px' y el 'alto' es '400px'. Ahora, el tamaño de la imagen se ajustará en consecuencia.
Se actualizó el tamaño de la imagen en este resultado; su 'ancho' ahora es '500px' y su 'alto' es '400px'. Esto es visible como resultado del código Markdown que se proporciona arriba, donde hemos ajustado el ancho y la altura en el atributo de estilo.
Ejemplo # 05:
Estamos agregando otra imagen. Pero en este código Markdown, no cambiamos el tamaño de la imagen. El tamaño de la imagen se cambia solo cuando hemos utilizado la etiqueta “ ”. Ponemos el “!” y luego agregue el texto dentro de los corchetes que es 'Imagen solar'. Después de cerrar los corchetes, colocamos los paréntesis en los que hemos insertado el nombre de la imagen 'New_sun.png' y luego agregamos el texto que se mostrará al pasar el mouse. El tamaño original de la imagen se mostrará en el resultado.
La imagen del sol se muestra ya que hemos agregado esta imagen en el código Markdown. Además, el tamaño original de la imagen es visible porque no podemos ajustar el tamaño de la imagen sin usar la etiqueta ' '.
Ejemplo # 06:
Al emplear la etiqueta “ ”, ahora estamos cambiando el tamaño de esta imagen. En primer lugar, añadimos el nombre o ruta de la imagen cuyo tamaño queremos modificar en el campo “src”. El 'ancho' y la 'altura' de la imagen se han cambiado a '300'. El tamaño de la imagen ahora ha cambiado. La ventana de vista previa muestra el nuevo tamaño de la imagen.
El ancho y la altura de la imagen se han modificado a '300'.
Ejemplo # 07:
Al establecer los valores de 'ancho' y 'alto' de la imagen en porcentajes, podemos cambiar fácilmente estas dimensiones. Ambos ajustamos el 'ancho' y la 'altura' de la imagen al '40%' y luego cerramos esta etiqueta.
Aquí está la imagen con 40% de altura y también 40% de ancho. Hemos agregado este ancho y alto dentro de la etiqueta “ ” después de agregar el nombre de la imagen.
Ejemplo # 08:
Ahora, estamos usando el atributo 'estilo' en la etiqueta ' ' para cambiar el tamaño de la imagen en Markdown. Agregamos 'ancho y alto' como valores al atributo 'estilo' después de agregar el nombre de la imagen y el atributo 'alt'. El 'ancho' que especificamos es '450px', mientras que la 'altura' también se ajusta a '450px'. El tamaño de la imagen ahora cambiará apropiadamente de acuerdo con estos nuevos valores de ancho y alto.
Ahora, el resultado de este código también se muestra en la ventana de vista previa que se muestra a continuación. Tanto el ancho como el alto de esta imagen ahora son '450px' en este resultado a continuación.
Conclusión:
Hemos explorado el concepto de agregar imágenes en detalle en esta guía y también hemos explorado cómo modificar el tamaño de la imagen en Markdown. Agregamos las imágenes en Markdown y modificamos su tamaño con la ayuda de la etiqueta “ ” y mostramos cómo hacer todo esto en Markdown. Hemos cambiado el tamaño de la imagen poniendo los valores de ancho y alto tanto en números como en porcentajes. También hemos utilizado el atributo de estilo en la etiqueta “
” para actualizar o modificar el tamaño de la imagen en Markdown.