Agregue imágenes en Markdown y modifique el tamaño de la imagen

"Markdown" es uno de los idiomas de marcado que proporciona diferentes instalaciones para agregar texto, encabezados, párrafos, listas y enlaces y también podemos aplicar el formato a estos elementos en Markdown. También podemos insertar imágenes en Markdown y luego modificar el tamaño de las imágenes que hemos agregado en Markdown. Para modificar o cambiar el tamaño de la imagen en Markdown, tenemos que utilizar la etiqueta. Le mostraremos, en esta guía, cómo agregar imágenes en Markdown, así como cómo modificar el tamaño de la imagen en Markdown.

Para agregar imágenes en Markdown:

La sintaxis se da a continuación.

![texto alt] (ruta del nombre de imagen/imagen con extensión "Texto que muestra cuando Mouseover")

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 da a continuación a continuación.

Podemos cambiar el tamaño de la imagen estableciendo los valores de ancho y altura en números, así 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:

Utilizamos el código Visual Studio para realizar los códigos de Markdown. Para los códigos de 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 agregar soportes cuadrados en los que agregamos" texto alt ". Ahora, estamos agregando la ruta de la imagen.

Ingresamos 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 en la nube" y este es el texto que se muestra solo cuando el mouseover. Ahora, se agrega la imagen 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 de markdown que se muestra arriba.

Ejemplo # 02:

Ahora, estamos modificando el tamaño de esta imagen usando la etiqueta "". Primero, ingresamos al "SRC" en el que se agrega el nombre o ruta de la imagen. Después de esto, colocamos "alt" y ajustamos "imagen en la nube". 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, el tamaño de la imagen se modifica. 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 la "altura" es "300". Esto se debe a que hemos ajustado este ancho y altura en el código de markdown.

Ejemplo # 03:

También podemos modificar la imagen "ancho" y "altura" poniendo sus valores en porcentajes. Después de agregar el nombre o ruta de la imagen y ajustar el "ALT" a la "imagen en 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 de "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 de "estilo" y agregamos "ancho y altura" como sus valores. El "ancho" que establecemos está en píxeles que es "500px" y la "altura" es "400px". Ahora, el tamaño de la imagen se ajustará en consecuencia.

El tamaño de la imagen en este resultado se ha actualizado; Su "ancho" ahora es "500px" y su "altura" es "400px". Esto es visible como resultado del código de markdown que se proporciona anteriormente donde hemos ajustado el ancho y la altura en el atributo de estilo.

Ejemplo # 05:

Estamos agregando otra imagen. Pero en este código de 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 soportes cuadrados que es" Imagen del sol ". Después de cerrar los soportes cuadrados, colocamos los paréntesis en los que hemos insertado el nombre de la imagen "New_sun.PNG ”y luego agregue el texto que se mostrará en MouseOver. El tamaño original de la imagen se mostrará en el resultado.

La imagen del sol se muestra como hemos agregado esta imagen en el código de 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. Primero, agregamos el nombre o ruta de la imagen cuyo tamaño queremos modificar al 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 "altura" de la imagen en porcentajes, podemos cambiar fácilmente estas dimensiones. Ambos ajustamos el "ancho" y "altura" de la imagen a "40%" y luego cerramos esta etiqueta.

Aquí está la imagen con 40% de altura y también 40% en su ancho. Hemos agregado este ancho y altura dentro de la etiqueta "" después de agregar el nombre de la imagen.

Ejemplo # 08:

Ahora, estamos utilizando el atributo "estilo" en la etiqueta "" para cambiar el tamaño de la imagen en Markdown. Agregamos "ancho y altura" como los valores del 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á adecuadamente de acuerdo con estos nuevos valores de ancho y altura.

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 la altura 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 también. Hemos agregado las imágenes en Markdown y modificamos su tamaño con la ayuda de la etiqueta "" y hemos demostrado cómo hacer todo esto en Markdown. Hemos cambiado el tamaño de la imagen colocando los valores de ancho y altura en números, así 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.