HTML -Bildelement

In der Webentwicklung können verschiedene Techniken angewendet werden, um die Webseite insgesamt reaktionsschnell zu machen. Insbesondere werden Bilder hinzugefügt, um das Erscheinungsbild der Website zu verbessern. Das Hinzufügen großer oder kleiner Bilder kann jedoch auch zu einigen Sichtbarkeitsproblemen auf verschiedenen Geräten führen, oder manchmal wird das Bildformat nicht unterstützt. Um diese Probleme zu überwinden, können Sie das HTML -Tag verwenden.

In dieser Beschreibung führen Sie die Verwendung des HTML-Elements.

Was ist HTML -Element?

Für Webentwickler die HTML “Element bietet Flexibilität bei der Angabe von Bildressourcen. Es ermöglicht es, ein oder mehrere Elemente und ein Element in der letzten Eingabe einzugeben. Der Browser lädt jedes Bild aus dem und zeigt das am besten geeignete Bild an. Wenn es keine Übereinstimmungen findet, wird das im Tag angegebene Bild angezeigt.

So verwenden Sie HTML -Element?

Um HTML -Tag zu verwenden, folgen Sie der angegebenen Syntax:

Die Beschreibung der obigen Syntax ist unten aufgeführt:

• “Ist das StartetikIst das Endetikett.
• “Element hält die Versionen eines Bildes. Diese Versionen entsprechen den Anzeigegeräten. Darüber hinaus kann es in Bildelementen mehrere Tags geben.
• “"Tag wird verwendet, um die Quelle bereitzustellen"src”Des Bildes, der Größe und anderer Attribute.

Schauen wir uns das angegebene Beispiel an.

Beispiel: Verwenden Sie Bilder mit unterschiedlichen Dimensionen in HTML?

In diesem Beispiel wird gezeigt, wie der Browser jedes Bild aus dem Quellelement lädt und die entsprechend der Bildschirmgröße angemessener ist. Verwenden Sie dazu drei Bilder mit unterschiedlichen Abmessungen.

Hier ist die Liste der Bilder mit unterschiedlichen Dimensionen im Projektordner:

Lassen Sie uns nun sehen, wie diese Bilder mit verschiedenen Bildschirmgrößen angezeigt werden.

In HTML zuerst hinzufügen

Tag zum Übergang. Dann in derElement -Tag, fügen Sie mehrere Tags mit dem Pfad der Bilder hinzu:

HTML -Bild -Tag

Die Beschreibung des im obigen oben genannten Code-Abschnitts genannten Tags wird unten erwähnt:

• “Ist das Start -Tag des Bildelements.
• “Das Tag wird verwendet, um mehrere Quellbilder bereitzustellen.
• “Medien”Attribut definiert den Typ des Mediengeräts, mit dem das HTML -Element verknüpft ist.
• “srcsetDas Attribut wird verwendet, um die URLs verschiedener Bilder bereitzustellen, die angezeigt werden müssen.
• “Das Tag wird am Ende als Kind verwendet, das das alternative Bild liefert. Das heißt, wenn eines der Bilder aus dem Quell -Tag nicht geladen werden konnte, wird das angegebene Bild als Alternative verwendet.
• “src”Attribut bedeutet den Pfad des alternativen Bildes.
• “AltDas Attribut wird verwendet, um alternativen Text zum Anzeigen hinzuzufügen, falls das Bild nicht geladen werden kann.
• “BreiteDas Attribut wird verwendet, um die Breite des Bildes in Pixel anzugeben.
• “Ist das Schlussetikett.

Notiz: Das Medienattribut gibt die Mediengerätetypen an, für die das Element verknüpft ist.

Die angegebene Ausgabe unten zeigt deutlich, dass die Bilder entsprechend der Bildschirmgröße unseres Geräts reagieren. Zuerst die “IMG1"Mit der Dimension 3047 x 1246 wird angezeigt, und wenn der Bildschirm über 500px gezogen wird, dann", dann ", dann"IMG3" wird angezeigt. Schließlich, wenn die Dimension 1000px überschreitet, “IMG2" erscheint:

Auf diese Weise können Sie das Tag verwenden, um die Bilder entsprechend unserer Bildschirmgröße reagieren zu lassen.

Abschluss

Bilder spielen eine wichtige Rolle, um die Website attraktiv zu machen. Darüber hinaus kann das HTML -Element verwendet werden, um die Website reaktionsschneller zu gestalten. Dieses Tag umfasst das Tag und das Tag, das verwendet wird, um mehrere Medienressourcen für Medienelemente wie und Tags bereitzustellen. Dieser Artikel hat die Verwendung des HTML -Elements gezeigt und wie Bilder entsprechend der Bildschirmgröße reagieren können.