Wie man Bilder mithilfe des Bildelements in HTML5 responsiv verarbeitet
小云云
Freigeben: 2018-01-05 17:58:43
Original
1819 Leute haben es durchsucht
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:
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.
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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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">
Nach dem Login kopieren
Nach dem Login kopieren
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;
Ladet höhere Pixeldichte, zeigt Bilder mit höherer Auflösung an
Erstellen Sie -Tags. Erstellen Sie innerhalb dieser Tags ein
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.
🎜>
Arbeitsprinzip
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 -Element reaktionsfähige Bilder allein mit
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!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn