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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png" 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> 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="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> 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="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!