Balise d'image HTML

Les développeurs front-end utilisent la balise d'image HTML pour spécifier plusieurs sources de fichiers à afficher sur une page Web en fonction de la préférence, comme la fenêtre d'affichage. Cette balise permet aux développeurs Web des pages Web réactives de spécifier les sources de plusieurs images et de sélectionner automatiquement une image en fonction de la fenêtre d'affichage afin que la page Web soit parfaitement remplie avec la source. Nous pouvons spécifier plusieurs sources dans la balise d'image, et la page Web chargera l'image qui répond à la préférence. La balise image est introduite avec HTML 5.

Syntaxe :

La balise d'image en HTML contient deux types de balises, le premier type est qui permet de spécifier la source des fichiers, et le second est qui permet de spécifier une image à afficher dans le cas où un navigateur ne prend pas en charge la balise étiqueter. La syntaxe du la balise est comme ci-dessous,

<picture>
<source .>
.
.
<source .>
<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png" class="lazy" . alt="Balise d'image HTML" >
</source></source></picture>

La balise d'image aura toujours une balise de fermeture contenant les deux types de balises, comme mentionné. Le la balise viendra plusieurs fois en fonction du nombre de ressources, et il n'y aura qu'une seule balise étiqueter. La balise source et la balise d'image auront des attributs différents qui détermineront la fonctionnalité d'une balise d'image.

Attributs de la balise d'image HTML

Comme mentionné, la balise image contient les deux autres balises et . Les attributs applicables à ces deux balises s'appliqueront à la balise image.

1. src

Cet attribut est utilisé avec l'attribut étiqueter. Cet attribut permet de préciser le chemin ou l'URL de l'image à afficher. Ce champ est obligatoire et doit être spécifié chaque fois qu'une balise source est utilisée. De cette façon, nous pouvons spécifier plusieurs sources pour les images.

2. srcset

Cet attribut peut être utilisé avec ou balises et est nouveau dans HTML 5. Cet attribut est similaire au précédent attribut « src », mais il nous permet de définir des valeurs supplémentaires. Cet attribut prend deux valeurs en entrée, la première est le chemin ou l'URL d'un fichier, et la seconde est soit un descripteur de largeur d'une image comme (100w), soit un descripteur de densité de pixels d'une image comme (3x) ; chacun est suivi respectivement de w et x.

3. médias

Cet attribut est utilisé avec l'attribut étiqueter. Cette balise nous permet de définir les règles selon lesquelles l'image doit être affichée. Cet attribut prend n'importe quelle requête multimédia en entrée et applique la règle. La requête multimédia peut vérifier la taille ou la hauteur de la fenêtre d'affichage ou de l'appareil, etc.

De cette façon, nous pouvons obtenir un design réactif en utilisant cet attribut et cette balise ainsi que l'attribut étiquette.

4. tailles

Cet attribut peut être utilisé avec et balises. Comme l'image sera affichée avec la largeur par défaut, cet attribut nous permet de spécifier explicitement la largeur d'une image en fonction de l'état du support. La condition multimédia est une condition simple comme « largeur maximale : 800 px » sans aucun paramètre supplémentaire. La balise d'image aura toujours une balise de fermeture contenant les deux types de balises, comme mentionné. Le la balise viendra plusieurs fois en fonction du nombre de ressources, et il n'y aura qu'une seule balise étiqueter. La balise source et la balise image auront des attributs différents qui détermineront la fonctionnalité d’une balise image. L'attribut size peut accepter plusieurs conditions de média comme celle-ci. Ceci est très utile dans la conception Web réactive, où nous pouvons définir les conditions et afficher les images en conséquence.

5. tapez

Cet attribut est utilisé avec l'attribut étiqueter. Cet attribut nous permet de préciser explicitement le type MIME du fichier à afficher.

Exemples de balises d'image HTML

Le HTML est utilisé pour donner aux développeurs Web la flexibilité de définir les ressources d'images. Vous trouverez ci-dessous des exemples de balises d'image HTML :

Exemple n°1

Code :

<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<title>
picture tag in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2 id="picture-tag-in-HTML"> picture tag in HTML </h2>
<span> Resize the browser to see the effect.. </span>
<div class="resultText">
<picture>
<source media="(min-width: 550px)" srcset="https://cdn.educba.com/triangle.png">
<source media="(min-width: 465px)" srcset="https://cdn.educba.com/rectangle.png">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png" class="lazy" alt="Balise dimage HTML"   style="max-width:90%">
</source></source></picture>
</div>
</div>

Sortie :

Ici, nous avons trois images avec des résolutions différentes.

Dans le code, nous avons spécifié la requête média de largeur minimale pour afficher une image. Après avoir exécuté le code, essayez de redimensionner la taille du navigateur et différentes images s'afficheront en fonction de la largeur.

Pour une largeur supérieure à 550 px :

Pour une largeur supérieure à 465 px :

Pour les autres cas, c'est à dire largeur inférieure à 465px :

Note, the outer border of the images clarifies the resolution of images. In most of the cases, all these images will be the same but with different resolutions.

Example #2

Code:

<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<title>
picture tag in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
.img {
max-width: 100%;
}
</style>


<div class="results">
<h2 id="picture-tag-in-HTML"> picture tag in HTML </h2>
<span> Resize the browser to see the effect.. </span>
<div class="resultText">
<picture>
<source media="(min-width: 550px)" srcset="https://cdn.educba.com/triangle.png">
<source media="(min-width: 465px)" srcset="https://cdn.educba.com/rectangle.png">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543851554073.png" class="lazy" alt="Balise dimage HTML" srcset="https://cdn.educba.com/Balise dimage HTML.png 2000w" sizes="900vw"   style="max-width:90%">
</source></source></picture>
</div>
</div>

Output:

Here, we have used the attribute size with the tag. The maximum width of an image is limited by using CSS first, but these sizes attribute, along with srcset, forces to use the width depending on the size specified in terms of the viewport.

Conclusion

Web developers use HTML picture tag in responsive web page designing. This tag consists of two child tags source and img. Using different attributes available for these tags makes it possible to display images dynamically depending on the conditions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!