Elemento de imagen html

En el desarrollo web, se pueden aplicar diferentes técnicas para hacer que la página web sea receptiva en general. Más específicamente, se agregan imágenes para mejorar la apariencia del sitio web. Sin embargo, agregar imágenes grandes o pequeñas también puede dar lugar a algunos problemas de visibilidad en diferentes dispositivos, o a veces el formato de imagen no es compatible con. Para superar estos problemas, puede usar la etiqueta HTML.

Este artículo le guiará sobre el uso del elemento HTML.

¿Qué es el elemento HTML??

Para los desarrolladores web, el HTML "El elemento proporciona flexibilidad para especificar recursos de imagen. Permite ingresar uno o más elementos y un elemento en el último. El navegador carga cada imagen desde y muestra la imagen más apropiada, y si no encuentra ninguna coincidencia, se mostrará la imagen especificada en la etiqueta.

Cómo usar el elemento HTML?

Para usar la etiqueta HTML, siga la sintaxis dada:

La descripción de la sintaxis anterior se enumera a continuación:

• ""Es la etiqueta de inicio y""Es la etiqueta final.
• "El elemento contiene las versiones de una imagen. Estas versiones están de acuerdo con los dispositivos de visualización. Además, puede haber múltiples etiquetas en los elementos de imagen.
• ""La etiqueta se usa para proporcionar la fuente"SRC"De la imagen, el tamaño y otros atributos.

Veamos el ejemplo dado.

Ejemplo: Cómo usar imágenes con diferentes dimensiones en HTML?

Este ejemplo demostrará cómo el navegador carga cada imagen desde el elemento fuente y muestra la más apropiada de acuerdo con el tamaño de la pantalla. Para hacerlo, use tres imágenes con diferentes dimensiones.

Aquí está la lista de imágenes con diferentes dimensiones colocadas en la carpeta del proyecto:

Ahora, veamos cómo se mostrarán estas imágenes con diferentes tamaños de pantalla.

En HTML, primero agregar

Etiqueta para encabezar. Entonces, en el "Etiqueta de elementos, agregue varias etiquetas con la ruta de las imágenes:

Etiqueta de imagen html

La descripción de la etiqueta mencionada en la sección de código proporcionado anteriormente se menciona a continuación:

• ""¿Es la etiqueta inicial del elemento de la imagen?.
• "Se utiliza la etiqueta para proporcionar múltiples imágenes de origen.
• "medios de comunicación"El atributo define el tipo de dispositivo de medios al que el elemento HTML está vinculado para.
• "srcsetEl atributo se utiliza para proporcionar las URL de diferentes imágenes que deben mostrarse.
• ""La etiqueta, al final, se usa como un niño, que proporciona la imagen alternativa. Eso significa que si alguna de las imágenes de la etiqueta de origen no se puede cargar, entonces la imagen especificada se utiliza como alternativa.
• "SRC"El atributo significa la ruta de la imagen alternativa.
• "alternativoEl atributo se usa para agregar texto alternativo para mostrar en caso de que la imagen no se cargue.
• "ancho"El atributo se utiliza para especificar el ancho de la imagen en píxeles.
• ""¿Es la etiqueta de cierre?.

Nota: El atributo de medios especifica los tipos de dispositivos multimedia para los cuales el elemento está vinculado.

La salida dada a continuación muestra claramente que las imágenes responden según el tamaño de la pantalla de nuestro dispositivo. Al principio, el "IMG1"Con la dimensión 3047 x 1246 se muestra, y cuando la pantalla se arrastra por encima de 500px, luego"IMG3" se visualiza. Por último, cuando la dimensión excede 1000px ","IMG2"Aparece:

Así es como puede utilizar la etiqueta para que las imágenes respondan de acuerdo con el tamaño de nuestra pantalla.

Conclusión

Las imágenes juegan un papel vital en hacer que el sitio web sea atractivo. Además, para hacer que el sitio web sea más receptivo, el elemento HTML se puede usar. Esta etiqueta comprende la etiqueta y la etiqueta utilizadas para proporcionar múltiples recursos de medios para elementos de medios como y etiquetas. Este artículo ha demostrado el uso del elemento HTML y cómo las imágenes pueden recuperarse de acuerdo con el tamaño de la pantalla.