Wie man Bilder mithilfe des Bildelements in HTML5 responsiv verarbeitet

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. In diesem Artikel wird hauptsächlich die reaktionsfähige Bildverarbeitung von Bildelementen in HTML5 ausführlich erläutert. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Obwohl responsives 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;
    }
</style>

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 Breite des Bildes: Auto kann sicherstellen, dass sich die Breite des Bildes ändert. Die Höhe des Bildes wird entsprechend seinem eigenen Verhältnis von Breite zu Höhe skaliert.

Wenn wir auf einem mobilen Gerät auf das Bild in der responsiven Webseite zugreifen, skalieren wir nur die Auflösung des Bildes und laden das große Bild auf den PC herunter. Dies verschwendet nicht nur Datenverkehr, sondern auch Bandbreite Darüber hinaus wird die Öffnungsgeschwindigkeit von Webseiten verlangsamt und das Benutzererlebnis erheblich beeinträchtigt.

Neue Lösung: <picture>

1. <picture> ist ein neues Element von HTML5; Die Arbeit mit responsiven Bildern wird verbessert, wenn das <picture>-Element in Verbindung mit den aktuellen <audio>-, <video>-Elementen funktioniert, sodass mehrere <source>-Tags darin festgelegt werden können. Name, geladen entsprechend unterschiedlicher Bedingungen;

2. <Bild> kann unterschiedliche Bilder entsprechend unterschiedlicher Bedingungen laden ), Ausrichtung, Pixeldichte (DPR) usw.;

3. Geben Sie ein paar Kastanien an

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

2. In der folgenden Kastanie wird die Bildschirmrichtung hinzugefügt als Bedingung; wenn die Bildschirmausrichtung im Hochformat ist, wird das Bild mit der Endung _landscape.png geladen; wenn die Bildschirmausrichtung im Hochformat ist, wird das Bild mit der Endung _portrait.png geladen;

3. Die Bildschirmpixeldichte wird als Bedingung in der folgenden Kastanie hinzugefügt: Wenn die Pixeldichte 2x beträgt, laden Sie das Bild _retina.png 2x, wenn die Pixeldichte 1x beträgt, laden Sie das Bild ohne Retina-Suffix ;

<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" alt="this is a picture">
</picture>

4. Fügen Sie das Bilddateiformat als Bedingung in der folgenden Kastanie hinzu: Wenn das Bild im Webp-Format unterstützt wird, wird das Bild im Webp-Format geladen, und wenn das Bild im PNG-Format nicht unterstützt wird, Das Bild im PNG-Format wird geladen.

<picture>
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="img/minpic_landscape.png">
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png">
    <source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png">
    <source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>

Fügen Sie im folgenden Beispiel eine Breitenbeschreibung hinzu größtes Bild;

<picture>
    <source media="(min-width: 320px) and (max-width: 640px)" 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" alt="this is a picture">
</picture>

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

<picture>
    <source type="image/webp" srcset="img/picture.webp">
    <img src="img/picture.png" alt="this is a picture">
</picture>

Derzeit sind nur Chrome, Firefox und Opera damit kompatibel. Die spezifische Kompatibilität ist wie folgt:

<img src="picture-160.png" alt="this is a picture"
     sizes="90vw" 
     srcset="picture-160.png 160w,
             picture-320.png 320w,
             picture-640.png 640w,
             picture-1280.png 1280w">

<source media="(min-width: 800px)"
        sizes="90vw" 
        srcset="picture-landscape-640.png 640w,
                picture-landscape-1280.png 1280w,
                picture-landscape-2560.png 2560w">
&lt;img src=&quot;picture-160.png&quot; alt=&quot;this is a picture&quot;
     sizes=&quot;90vw&quot; 
     srcset=&quot;picture-160.png 160w,
             picture-320.png 320w,
             picture-640.png 640w,
             picture-1280.png 1280w&quot;&gt;

Vorteile:

Laden Sie Bilddateien in geeigneter Größe, damit die verfügbare Bandbreite voll ausgenutzt wird.

Laden Sie Bilder, die unterschiedlich zugeschnitten sind und unterschiedliche Seitenverhältnisse haben, um Layoutänderungen bei unterschiedlichen Anforderungen zu berücksichtigen Breiten;

1. Ladet höhere Pixeldichte, zeigt Bilder mit höherer Auflösung an

2. Erstellen Sie <picture></picture>-Tags. Erstellen Sie innerhalb dieser Tags ein <source></scource>-Tag 🎜>

3. Fügen Sie ein Medienattribut hinzu, um die gewünschten Eigenschaften wie Breite (maximale Breite, minimale Breite), Ausrichtung (Ausrichtung) usw. einzuschließen 🎜>

   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-Anzeigen, können Sie dem srcset-Attribut zusätzliche Dateinamen hinzufügen.

🎜>

<picture> Arbeitsprinzip

1. <picture> Wie aus dem obigen Beispielcode ersichtlich ist, ohne Einführung von js und Bibliotheken von Drittanbietern, Wenn Medienabfragen nicht in CSS enthalten sind, kann das <picture>-Element reaktionsfähige Bilder allein mit

<source> deklarierenDas

<picture>-Tag selbst hat keine Attribute. Das Zauberhafte daran ist, dass <picture> als Container für <source> 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:

srcset (erforderlich)


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

Oder einen durch Kommas getrennten Bildpfad, der die Pixeldichte beschreibt (z. B. srcset=" img/). minpic.png, img/minpic_retina.png 2x“), 1x Beschreibungen werden standardmäßig nicht verwendet.

Medien (optional)

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

wurde im vorherigen <picture>-Syntaxbeispiel verwendet.
Größen (optional)
Erhält eine einzelne Breitenbeschreibung (z. B. „sizes="100vw") oder eine einzelne Medienabfrage-Breitenbeschreibung (z. B. „sizes="(min-width: 320px ). )") Die letzte wird als Standard angesehen.
Typ (optional)
Akzeptieren Sie 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 entsprechende <source>-Element und ignoriert nachfolgende <source>-Tags.
Fügen Sie das letzte <img>-Element hinzu
Das <img>-Element wird innerhalb des <picture> verwendet, um es anzuzeigen, wenn der Browser es nicht unterstützt oder wenn keine Übereinstimmung vorhanden ist Quell-Tag. Es ist zwingend erforderlich, das Tag <img> innerhalb von <picture> zu verwenden.
Verwenden Sie <img>, um die Standardbildanzeige zu deklarieren. Platzieren Sie das <img>-Tag am Ende des <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 zum Bild finden Sie hier. Probieren Sie es jetzt aus Framework Bootstrap-Grid-System mit Beispielen
Mehrere responsive Frameworks, die für Webprogrammierer geeignet sind

HTML5-Responsive-Banner-Produktions-Tutorial

Das obige ist der detaillierte Inhalt vonWie man Bilder mithilfe des Bildelements in HTML5 responsiv verarbeitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!