Wie man HTML5 benutzt Element, um Responsive Image zu erreichen

Responsive Design kann hier bleiben, aber es gibt viele Probleme, die angesprochen werden müssen, wenn es darum geht, Bilder ansprechbar zu machen . Obwohl reaktionsfähige Bilder sich automatisch an der Größe des Darstellungsfeldes anpassen (was technisch einfach ist), besteht ein Problem für den Benutzer darin, dass der Bildstimmpunkt kaum sichtbar wird, wenn das Bild zu klein wird .

Der ideale Konsens unter Web-Entwicklern ist, dass die tatsächliche Dimension auch reagieren sollte . Der Browser sollte in der Lage sein, kleinere oder größere Bilder entsprechend der Größe des Darstellungsbereichs zu laden. Auf diese Weise können wir das beste Bildverhältnis und nicht das geschrumpfte Bild (wie gezeigt) steuern und liefern.

Hier kommt das HTML5- picture Spiel. Das picture ermöglicht es uns, mehrere Bildquellen zur Verfügung zu stellen und die Zustellung über Media Queries zu steuern. Obwohl es noch keinen Browser gibt, der dieses Element implementiert, können wir dafür einen Polyfill namens Picturefill verwenden. Mal sehen, wie es geht, sollen wir?

Anfangen

Picturefill ist eine JavaScript-Bibliothek, die von der Filament Group entwickelt wurde. Es erlaubt uns, das Bildelement jetzt zu verwenden. Laden Sie das Skript im Github-Repository herunter und legen Sie die picturefill.js oder picturefill.min.js . Picurefill ist eine eigenständige JavaScript-Bibliothek, die keine andere Bibliothek benötigt. Sie können es einfach in das head Tag einfügen.

Das Bild

Ich habe ein Bild in drei verschiedenen Dimensionen wie folgt vorbereitet. Das Bild wurde zugeschnitten, um den Fokus auf die Person im Bild zu bewahren. Der Plan hier ist, dass wir die kleinste Größe in kleinen Bildschirmen und das größere Bild in großen Bildschirmen zeigen.

Bildelement verwenden

Picturefill kann auf zwei Arten funktionieren: Wir können srcset in das img Tag einbetten oder das picture verwenden. Hier werden wir uns für das picture, da es überschaubarer, leichter zu verstehen und lesbarer ist.

Ähnlich wie video und audio werden mehrere source, die auf die Bildquelle verweisen, wie folgt umgebrochen.

Das Quellelement wird, wie Sie aus dem obigen Codefragment sehen können, mit dem Medienattribut festgelegt. In diesem Attribut geben wir den Viewport-Breakpoint an, auf dem das Bild dargestellt werden soll. Sie können den Effekt sofort sehen.

Sehen Sie sich die Demoseite an und ändern Sie die Größe des Darstellungsbereichs. Sie sollten das Bild innerhalb der angegebenen Darstellungsfeldbreite finden.

Bilderfüllung für WordPress

Wenn Sie WordPress verwenden, können Sie ein Plugin namens Picturefill.WP verwenden, mit dem Sie das Bildelement ohne Probleme in WordPress implementieren können. Lade einfach dein Bild hoch und bette es wie gewohnt ein, und dieses Plugin kümmert sich um den Rest.

Letzter Gedanke

Das Bildelement ist eine großartige Ergänzung in HTML5. Wir haben mehr Kontrolle über die Bildgröße und -größe, die der Browser darstellen sollte. Und mit picturefill können wir dieses neue Element jetzt verwenden, obwohl es noch kein Browser implementiert hat. Picturefill funktioniert in einer Vielzahl von Browsern einschließlich IE (wenn auch mit ein paar Einschränkungen).

Zuletzt, sieh dir die Demo an und lade den Quellcode herunter.

• Demo
• Quelle herunterladen

Entdecken Sie die besten Designagenturen weltweit mit TheDirectory.io

Designer müssen oft die Arbeit für ihre Projekte auslagern oder andere Agenturen ihren Kunden empfehlen . Das kann hart sein, weil es so viele talentierte Menschen gibt, mit denen man arbeiten kann.TheDirectory.io ist ein kostenloses Online-Verzeichnis mit den besten digitalen Agenturen, die von Designern organisiert und kuratiert werden.D

(Tech- und Design-Tipps)

Web-Entwickler: 10 besten Podcast-Kanäle, die Sie abonnieren müssen

Web-Entwicklung ist eine sich schnell verändernde Branche. Um auf dem Laufenden zu bleiben, müssen Sie ständig mit den neuesten und besten Informationen informiert werden, und einer der besten Wege dazu besteht darin , einen Podcast zu abonnieren . Podcasting oder Podcasting ist ein faszinierendes Medium, um Informationen und Nachrichten zu erhalten, insbesondere wenn Sie in das Büro pendeln oder im Fitnessstudio trainieren.Ein

(Tech- und Design-Tipps)