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
<picture> <source .> . . <source .> <img . 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
Comme mentionné, la balise image contient les deux autres balises
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.
Cet attribut peut être utilisé avec
Cet attribut est utilisé avec l'attribut
De cette façon, nous pouvons obtenir un design réactif en utilisant cet attribut et cette balise ainsi que l'attribut
Cet attribut peut être utilisé avec
Cet attribut est utilisé avec l'attribut
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 :
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> 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="Balise%20dimage%20HTML.png" 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.
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> 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="Balise%20dimage%20HTML.png" 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.
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!