Das Bild-Tag in HTML
Das Bild-Tag ermöglicht Programmierern mehr Flexibilität bei der Bildverarbeitung.
Die häufigste Verwendung des Bild-Tags ist das responsive Website-Design. Anstatt nur ein Bild zum Vergrößern und Verkleinern je nach Bildschirmgröße zu verwenden, werden mehrere Bilder mit unterschiedlichen Größen ausgewählt, die je nach Bildschirmgröße angezeigt werden, damit es gut aussieht.
Das Bild-Tag enthält zwei verschiedene Arten von Tags: ein img-Tag und ein oder mehrere Quell-Tags.
Das Quell-Tag hat die folgenden Attribute:
- srcset(request) – definiert die URL des anzuzeigenden Bildes.
- media – akzeptiert alle gültigen Medienabfragen, die normalerweise in CSS definiert sind.
- Größen – bestimmt die Größe des angezeigten Bildes.
- Typ – definiert den Dateityp.
Der Browser verwendet die Attributwerte, um das am besten geeignete Bild zu laden. Das erste Quell-Tag, das mit dem Attribut übereinstimmt, wird verwendet.
Das img-Tag ist das letzte untergeordnete Tag im Bild-Tag. Wenn es keine übereinstimmenden Quell-Tags gibt, wird das img-Tag für die Anzeige verwendet.
Verwenden
Beispiel : In diesem Beispiel verwende ich das Bild-Tag in Kombination mit den Source- und Img-Tags, um eine responsive Seite zu erstellen, die auf mehreren Bildschirmgrößen angezeigt wird.
Sie bereiten 3 Bilder black.jpg, yellow.jpg und blue.jpg vor, die sich auf der gleichen Ebene mit der HTML-Datei mit folgendem Inhalt befinden:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>Học html miễn phí tại web888.vn</h1> <picture> <source media="(min-width: 800px)" srcset="black.jpg"> <source media="(min-width: 600px)" srcset="blue.jpg"> <img src="yellow.jpg" alt="Flowers" style="width:auto;"> </picture> </body> </html>Ändern Sie die Größe des Browserfensters, Sie werden sehen, wie sich die Größe des Bildes ändert.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
