Ausführliche Erläuterung des Bildelements in HTML5 und der responsiven Bildverarbeitung

Das sogenannte Responsive Design bedeutet, dass das Webseitenlayout auf Endgeräten mit unterschiedlichen Bildschirmauflösungen, unterschiedlichen Pixeldichteverhältnissen und unterschiedlichen Breiten adaptiv angepasst werden kann. Die ursprüngliche Absicht des responsiven Designs besteht darin, die ursprüngliche PC-Website mit mobilen Endgeräten kompatibel zu machen. Die meisten responsiven Webseiten werden durch Medienabfragen und das Laden von CSS-Dateien unterschiedlicher Stile implementiert. Diese Art des flexiblen Layouts macht das Layout der Website auf verschiedenen Geräteterminals sinnvoller.

Obwohl Responsive Design viele Vorteile hat, hat es auch viele Nachteile. Da der PC und das mobile Endgerät auf dieselbe Website zugreifen, muss sich der PC nicht um das Verkehrslimit kümmern, das mobile Endgerät kann es jedoch nicht ignorieren.

Um uns an die Bildschirmbreite und Pixeldichte verschiedener Terminalmodelle anzupassen, verwenden wir im Allgemeinen die folgende Methode, um den CSS-Stil des Bildes festzulegen:

 <style> img{ max-width:100%; height:auto;

Stellen Sie die maximale Breite des Bildes auf 100 % ein, um sicherzustellen, dass das Bild die Breite seines übergeordneten Elements nicht überschreitet. Wenn sich die Breite des übergeordneten Elements ändert, ändert sich auch die Höhe Wenn sich die Breite des Bildes ändert, wird die Höhe des Bildes entsprechend seinem eigenen Verhältnis von Breite zu Höhe skaliert.

Auf diese Weise skalieren wir beim Zugriff auf die Bilder auf der responsiven Webseite nur die Auflösung des Bildes und laden das große Bild auf den PC herunter. Dies verschwendet nicht nur Datenverkehr und Bandbreite, sondern verlangsamt auch die Webseite. Die Öffnungsgeschwindigkeit beeinträchtigt das Benutzererlebnis erheblich.

1. <picture> ist ein neues Element von HTML5;
2. Wenn das <picture>-Element mit den aktuellen <audio>- und <video>-Elementen zusammenarbeitet, verbessert es den Prozess der responsiven Bildbearbeitung. Es ermöglicht die Festlegung mehrerer <source>-Tags, um unterschiedliche Ladebedingungen festzulegen ;
3. <Bild> kann unterschiedliche Bilder entsprechend unterschiedlichen Bedingungen laden. Diese Bedingungen können die aktuelle Höhe des Fensters (Ansichtsfenster), die Breite (Breite), die Richtung (Ausrichtung), die Pixeldichte (DPR) usw. sein.

In der folgenden Kastanie werden unterschiedliche Bilder für unterschiedliche Bildschirmbreiten geladen; minpic.png wird geladen, wenn die Seitenbreite zwischen 320 Pixel und 640 Pixel liegt; middle.png wird geladen, wenn die Seitenbreite größer als 640 Pixel ist.

 <picture> <source media=(min-width: 320px) and (max-width: 640px) srcset=img/minpic.png> <source media=(min-width: 640px) srcset=img/middle.png> < img src=img/picture.png <source media=(min-width: 320px) und (maximale Breite: 640 Pixel) und (Ausrichtung: Querformat) srcset=img/minpic_landscape.png> minpic_portrait.png> <source media=(min-width: 640px) und (Ausrichtung: Querformat) srcset=img/middlepic_landscape.png> <Quellmedium=(min-width: 640px) und (Ausrichtung: Hochformat) srcset=img/middlepic_portrait.png> <img src=img/picture.png <Quellmedium =(Mindestbreite: 320 Pixel) und (Maximale Breite: 640 Pixel) srcset=img/minpic.png,img/minpic_retina.png 2x> <source media=(min-width: 640px) srcset=img/middle.png,img/middle_retina.png 2x> <img src=img/picture.png ,img/picture_retina.png 2x <source type=image/webp srcset=img/picture.webp> <img src=img/picture.png size=90vw srcset=picture-160.png 160w, picture-320.png 320w, picture-640.png 640w, picture-1280.png 1280w>

6. Fügen Sie im folgenden Beispiel das Größenattribut hinzu; laden Sie die entsprechende Version des Bildes, wenn die Fensterbreite größer oder gleich 800 Pixel ist;

 <source media=(min-width: 800px) size=90vw srcset=picture-landscape-640.png 640w, picture-landscape-1280.png 1280w, picture-landscape-2560.png 2560w><img src=picture-160 .png-Größen=90vw srcset=picture-160.png 160w, picture-320.png 320w, picture-640.png 640w, picture-1280.png 1280w>

Kompatibilität:

Derzeit sind nur Chrome, Firefox und Opera gut kompatibel. Die spezifische Kompatibilität ist in der Abbildung dargestellt:

1. Laden Sie Bilddateien in geeigneter Größe, sodass die verfügbare Bandbreite vollständig ausgenutzt wird.
2. Laden Sie Bilder, die unterschiedlich zugeschnitten sind und unterschiedliche Seitenverhältnisse haben, um Layoutänderungen in unterschiedlichen Breiten zu berücksichtigen.
3. Laden Sie eine höhere Pixeldichte und zeigen Sie Bilder mit höherer Auflösung an.

1. <picture></picture>-Tag erstellen;
2. Erstellen Sie innerhalb dieser Tags ein <source></scource>-Tag, mit dem Sie eine beliebige Funktion ausführen möchten.
3. Fügen Sie ein Medienattribut hinzu, um die gewünschten Eigenschaften wie Breite (maximale Breite, minimale Breite), Ausrichtung (Ausrichtung) usw. einzuschließen.
4. Fügen Sie ein srcset-Attribut hinzu, der Attributwert ist der entsprechende Bilddateiname und laden Sie ihn. Wenn Sie unterschiedliche Pixeldichten bereitstellen möchten, z. B. bei Retina-Displays, können Sie dem srcset-Attribut zusätzliche Dateinamen hinzufügen.
5. Fügen Sie ein Fallback-<img>-Tag hinzu;

Wie aus dem obigen Beispielcode ersichtlich ist, kann das Element <picture> reaktionsfähige Bilder nur mit HTML deklarieren, ohne js und Bibliotheken von Drittanbietern einzuführen und ohne Medienabfragen in CSS einzubeziehen.

Das <picture>-Tag selbst hat keine Attribute. Das Zauberhafte daran ist, dass <Bild> als Container für <Quelle> verwendet wird.

Das <source>-Element, das zum Laden von Multimedia-Inhalten wie Video und Audio verwendet wird, wurde zum Laden von Bildern aktualisiert und einige neue Attribute wurden hinzugefügt:

Akzeptiert einen einzelnen Bilddateipfad (z. B. srcset=img/minpic.png).

Oder es handelt sich um einen durch Kommas getrennten Bildpfad, der durch die Pixeldichte beschrieben wird (z. B. srcset=img/minpic.png, img/minpic_retina.png 2x). Die 1x-Beschreibung wird standardmäßig nicht verwendet.

Akzeptiert jede validierte Medienabfrage, wie Sie im CSS-@media-Selektor sehen können (z. B. media=(min-width: 320px)).

Es wurde im vorherigen <picture>-Syntaxbeispiel verwendet.

Erhalten Sie eine einzelne Breitenbeschreibung (z. B. „sizes=100vw“) oder eine einzelne Medienabfrage-Breitenbeschreibung (z. B. „sizes=(min-width: 320px) 100vw“).

Oder durch Kommas getrennte Breitenbeschreibungen für Medienabfragen (z. B. Größen=(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)). Letzteres wird als Standard verwendet.

Akzeptiert unterstützte MIME-Typen (z. B. type=image/webp oder type=image/vnd.ms-photo)

Der Browser lädt die genaue Bildressource basierend auf diesen Hinweisen und Attributen. Gemäß der Listenreihenfolge der Tags. Der Browser verwendet das erste geeignete <source>-Element und ignoriert nachfolgende <source>-Tags.

Das <img>-Element wird in <picture> verwendet, um angezeigt zu werden, wenn der Browser es nicht unterstützt oder wenn kein passendes Quell-Tag vorhanden ist. Es ist notwendig, das <img>-Tag innerhalb von <picture> zu verwenden. Wenn Sie es vergessen, wird kein Bild angezeigt.

Verwenden Sie <img>, um die Standardbildanzeige zu deklarieren. Platzieren Sie das <img>-Tag am Ende von <picture>, und der Browser ignoriert die <source>-Deklaration, bevor er das <img>-Tag findet. Für dieses Bild-Tag müssen Sie auch sein Alt-Attribut schreiben.

Dieser Artikel basiert auf vielen anderen Artikeln. Alle Einführungen zu Bildern finden Sie hier, also versuchen wir es jetzt

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.