Élément d'image HTML

Dans le développement Web, différentes techniques peuvent être appliquées pour rendre la page Web globale réactive. Plus précisément, des images sont ajoutées pour améliorer l'apparence du site Web. Cependant, l'ajout d'images grandes ou petites peut également entraîner des problèmes de visibilité sur différents appareils, ou parfois le format d'image n'est pas pris en charge. Pour surmonter ces problèmes, vous pouvez utiliser la balise HTML.

Cet article vous guidera sur l'utilisation de l'élément HTML.

Qu'est-ce que l'élément HTML?

Pour les développeurs Web, le HTML "»L'élément offre une flexibilité dans la spécification des ressources d'image. Il permet d'entrer un ou plusieurs éléments, et un élément dans le dernier. Le navigateur charge chaque image de la et affiche l'image la plus appropriée, et s'il ne trouve aucune correspondance, l'image spécifiée dans la balise sera affichée.

Comment utiliser l'élément HTML?

Pour utiliser la balise HTML, suivez la syntaxe donnée:

La description de la syntaxe ci-dessus est répertoriée ci-dessous:

• ""Est la balise de départ et""Est la balise de fin.
• "”Element détient les versions d'une image. Ces versions sont selon les dispositifs d'affichage. De plus, il peut y avoir plusieurs balises dans des éléments d'image.
• ""La balise est utilisée pour fournir la source"SRC«De l'image, de la taille et d'autres attributs.

Voyons l'exemple donné.

Exemple: comment utiliser des images avec différentes dimensions dans HTML?

Cet exemple montrera comment le navigateur charge chaque image de l'élément source et affiche celui qui est plus approprié en fonction de la taille de l'écran. Pour ce faire, utilisez trois images avec différentes dimensions.

Voici la liste des images avec différentes dimensions placées dans le dossier du projet:

Maintenant, voyons comment ces images seront affichées avec différentes tailles d'écran.

En html, ajoutez d'abord

Tag pour la tête. Ensuite, dans le «”Tag élément, ajoutez plusieurs balises avec le chemin des images:

Tag d'image HTML

La description de la balise mentionnée dans la section de code ci-dessus est mentionnée ci-dessous:

• ""Est la balise de départ de l'élément d'image.
• "»La balise est utilisée pour fournir plusieurs images source.
• "médias»L'attribut définit le type de périphérique multimédia auquel l'élément HTML est lié pour.
• "srcset»L'attribut est utilisé pour fournir les URL de différentes images qui doivent être affichées.
• "”Tag, en fin de compte, est utilisé comme enfant, qui fournit l'image alternative. Cela signifie que si l'une des images de la balise source ne pouvait pas se charger, alors l'image spécifiée est utilisée comme un autre.
• "SRC»L'attribut signifie le chemin de l'image alternative.
• "alt»L'attribut est utilisé pour ajouter un texte alternatif à afficher dans le cas où l'image est échouée.
• "largeur»L'attribut est utilisé pour spécifier la largeur de l'image en pixels.
• ""Est la balise de clôture.

Note: L'attribut multimédia spécifie les types de périphériques multimédias pour lesquels l'élément est lié.

La sortie donnée ci-dessous montre clairement que les images sont réactives en fonction de la taille de l'écran de notre appareil. Au début, le «img1«Avec la dimension 3047 x 1246 s'affiche, et lorsque l'écran est glissé au-dessus de 500px, puis«img3" est affiché. Enfin, lorsque la dimension dépasse 1000px, «img2"Apparaît:

C'est ainsi que vous pouvez utiliser la balise pour rendre les images réactives en fonction de la taille de notre écran.

Conclusion

Les images jouent un rôle vital dans la rendez-vous attrayant le site Web. De plus, pour rendre le site Web plus réactif, l'élément HTML peut être utilisé. Cette balise comprend l'étiquette et la balise utilisée pour fournir plusieurs ressources multimédias pour les éléments médiatiques comme, et les balises. Cet article a démontré l'utilisation de l'élément HTML et comment les images peuvent être rendues réactives en fonction de la taille de l'écran.