HTML-Bild-Tag

Die Frontend-Entwickler verwenden HTML-Bild-Tags, um mehr als eine Dateiquelle anzugeben, die auf einer Webseite angezeigt werden soll, abhängig von der Voreinstellung, z. B. dem Ansichtsfenster. Mit diesem Tag können Webentwickler in responsiven Webseiten mehrere Bildquellen angeben und je nach Ansichtsfenster automatisch ein Bild auswählen, sodass die Webseite perfekt mit der Quelle gefüllt wird. Wir können im Bild-Tag mehrere Quellen angeben, und die Webseite lädt das Bild, das der Präferenz entspricht. Der Bild-Tag wird mit HTML 5 eingeführt.

Syntax:

Das Bild-Tag in HTML enthält zwei Arten von Tags, der erste Typ ist Hiermit können Sie die Quelle der Dateien angeben, und das zweite ist Tag, der die Angabe eines Bildes ermöglicht, das angezeigt werden soll, falls ein Browser das -Tag nicht unterstützt. Etikett. Die Syntax des Tag ist wie unten,

<picture>
<source .>
.
.
<source .>
<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png?x-oss-process=image/resize,p_40" class="lazy" . alt="HTML-Bild-Tag" >
</source></source></picture>

Das Bild-Tag verfügt immer über ein schließendes Tag mit den beiden Arten von Tags, wie bereits erwähnt. Das Das Tag kommt je nach Anzahl der Ressourcen mehrmals vor und es gibt nur ein Etikett. Das Quell- und das Bild-Tag verfügen über unterschiedliche Attribute, die die Funktionalität eines Bild-Tags bestimmen.

Attribute des HTML-Bild-Tags

Wie bereits erwähnt enthält das Bild-Tag die beiden anderen Tags und . Die für diese beiden Tags geltenden Attribute gelten für das Bild-Tag.

1. src

Dieses Attribut wird zusammen mit dem Etikett. Mit diesem Attribut können Sie den Pfad oder die URL des anzuzeigenden Bildes angeben. Dieses Feld ist erforderlich und muss immer dann angegeben werden, wenn ein Quell-Tag verwendet wird. Auf diese Weise können wir mehrere Quellen für Bilder angeben.

2. srcset

Dieses Attribut kann mit verwendet werden. oder Tags und ist neu in HTML 5. Dieses Attribut ähnelt dem vorherigen „src“-Attribut, ermöglicht uns jedoch die Definition einiger weiterer Werte. Dieses Attribut akzeptiert zwei Werte als Eingabe: Der erste ist der Pfad oder die URL einer Datei und der zweite ist entweder ein Breitendeskriptor eines Bildes wie (100w) oder ein Pixeldichtedeskriptor eines Bildes wie (3x); Auf jedes folgen w bzw. x.

3. Medien

Dieses Attribut wird zusammen mit dem Etikett. Mit diesem Tag können wir die Regeln definieren, nach denen das Bild angezeigt werden soll. Dieses Attribut nimmt jede Medienabfrage als Eingabe und wendet die Regel an. Die Medienabfrage kann die Überprüfung des Ansichtsfensters oder der Gerätegröße oder -höhe usw. umfassen.

Auf diese Weise können wir mithilfe dieses Attributs und Tags zusammen mit dem ein responsives Design erreichen. Tag.

4. Größen

Dieses Attribut kann mit verwendet werden. und Tags. Da das Bild mit der Standardbreite angezeigt wird, können wir mit diesem Attribut die Breite eines Bildes abhängig von der Medienbedingung explizit angeben. Die Medienbedingung ist eine einfache Bedingung wie „max-width: 800px“ ohne zusätzliche Parameter. Das Bild-Tag verfügt, wie erwähnt, immer über ein schließendes Tag mit den beiden Arten von Tags. Das Das Tag kommt je nach Anzahl der Ressourcen mehrmals vor und es gibt nur ein Etikett. Das Quell- und das Bild-Tag verfügen über unterschiedliche Attribute, die die Funktionalität eines Bild-Tags bestimmen. Das Größenattribut kann mehr als eine solche Medienbedingung akzeptieren. Dies ist sehr nützlich beim responsiven Webdesign, wo wir die Bedingungen festlegen und Bilder entsprechend anzeigen können.

5. Typ

Dieses Attribut wird zusammen mit dem Etikett. Mit diesem Attribut können wir den MIME-Typ der anzuzeigenden Datei explizit angeben.

Beispiele für HTML-Bild-Tags

HTML wird verwendet, um Webentwicklern die Flexibilität zu geben, Bildressourcen zu definieren. Nachfolgend finden Sie Beispiele für HTML-Bild-Tags:

Beispiel #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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML-Bild-Tag"   style="max-width:90%">
</source></source></picture>
</div>
</div>

Ausgabe:

Hier haben wir drei Bilder mit unterschiedlichen Auflösungen.

Im Code haben wir die Medienabfrage mit minimaler Breite angegeben, um ein Bild anzuzeigen. Versuchen Sie nach dem Ausführen des Codes, die Größe des Browsers zu ändern. Je nach Breite werden dann unterschiedliche Bilder angezeigt.

Für eine Breite von mehr als 550 Pixel:

Für eine Breite von mehr als 465 Pixel:

Für andere Fälle, d. h. Breite weniger als 465 Pixel:

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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543851554073.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML-Bild-Tag" srcset="https://cdn.educba.com/HTML-Bild-Tag.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.

Das obige ist der detaillierte Inhalt vonHTML-Bild-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!